import React from 'react';
import { CATEGORIES } from '../constants';

export const Categories: React.FC = () => {
  return (
    <div className="flex flex-col h-full bg-background-dark">
      <div className="h-10 w-full"></div>
      
      <div className="flex flex-col gap-2 px-4 pb-2 sticky top-0 z-20 bg-background-dark/95 backdrop-blur-md">
        <div className="flex items-center h-12 justify-between">
          <span className="text-white/60 text-sm font-medium">Изменить</span>
          <button className="flex items-center justify-center rounded-full size-10 bg-primary/10 text-primary">
            <span className="material-symbols-outlined text-[24px]">add</span>
          </button>
        </div>
        <h1 className="text-white tracking-tight text-[32px] font-bold leading-tight">Категории</h1>
      </div>

      <div className="px-4 py-2 sticky top-[108px] z-10 bg-background-dark pb-4">
        <div className="flex w-full items-stretch rounded-lg h-10 bg-card-dark overflow-hidden transition-all duration-200">
          <div className="text-white/40 flex items-center justify-center pl-3 pr-2">
            <span className="material-symbols-outlined text-[20px]">search</span>
          </div>
          <input className="bg-transparent border-none focus:ring-0 placeholder:text-white/40 px-0 text-base text-white flex-1" placeholder="Поиск жанра..." />
          <div className="flex items-center pr-3">
            <span className="material-symbols-outlined text-[20px] text-white/40">mic</span>
          </div>
        </div>
      </div>

      <div className="flex-1 flex flex-col px-4 pb-24 gap-3 overflow-y-auto no-scrollbar">
        {CATEGORIES.map((cat) => (
          <button key={cat.id} className="group flex items-center gap-4 bg-card-dark p-4 rounded-xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all border border-white/5">
            <div className={`flex items-center justify-center rounded-lg ${cat.colorClass} shrink-0 size-12`}>
              <span className="material-symbols-outlined text-[24px]">{cat.icon}</span>
            </div>
            <div className="flex flex-col flex-1 items-start">
              <p className="text-white text-[17px] font-semibold leading-snug">{cat.name}</p>
              <p className="text-white/50 text-[13px] font-medium leading-normal">
                {cat.count > 0 ? `${cat.count} книги` : 'Нет книг'}
              </p>
            </div>
            <div className="shrink-0 text-white/20 group-hover:text-primary transition-colors">
              <span className="material-symbols-outlined text-[24px]">chevron_right</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};