import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"
import { Category } from "../data/categories"

// Типы для свойств компонента
interface PopularCategoriesProps {
  categories: Category[]
}

export default function PopularCategories({ categories }: PopularCategoriesProps) {
  return (
    <section className="py-12 px-4 md:px-8 max-w-7xl mx-auto">
      <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center font-['Playfair_Display']">Популярные категории</h2>
      
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        {categories.map((category, index) => (
          <Link href={category.url} key={category.id} className="group">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.05 }}
              className="overflow-hidden rounded-xl"
            >
              <div className="relative aspect-square overflow-hidden rounded-xl">
                <Image
                  src={category.image}
                  alt={category.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
                  <h3 className="text-base md:text-lg font-medium">{category.name}</h3>
                </div>
              </div>
            </motion.div>
          </Link>
        ))}
      </div>
    </section>
  )
} 