import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';

// Типы для свойств компонента
interface CollectionsProps {
  collections: Collection[];
}

// Тип для коллекции
interface Collection {
  id: number;
  name: string;
  image: string;
  description: string;
  url: string;
}

export default function Collections({ collections }: CollectionsProps) {
  return (
    <section className="py-8 bg-white">
      <div className="container mx-auto px-6">
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="text-3xl text-center font-medium mb-12"
        >
          Коллекции
        </motion.h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {collections.map((collection, index) => (
            <motion.div
              key={collection.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="group relative overflow-hidden rounded-lg"
            >
              <Link href={collection.url}>
                <div className="relative aspect-[4/3] w-full overflow-hidden">
                  <Image 
                    src={collection.image} 
                    alt={collection.name}
                    layout="fill"
                    objectFit="cover"
                    className="transition-all duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-black bg-opacity-20 transition-opacity group-hover:bg-opacity-30" />
                </div>
                <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
                  <h3 className="text-xl font-medium mb-2">{collection.name}</h3>
                  <p className="text-sm opacity-90">{collection.description}</p>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}