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

interface CollectionsProps {
  collections: Collection[]
}

export default function Collections({ collections }: CollectionsProps) {
  return (
    <section className="py-12 px-4 md:px-8 max-w-7xl mx-auto">
      <h2 className="text-2xl md:text-3xl font-bold text-center mb-8 font-['Playfair_Display']">Коллекции</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {collections.map((collection, index) => (
          <Link href={collection.url} key={collection.id} className="group">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="overflow-hidden rounded-xl"
            >
              <div className="relative aspect-[4/5] overflow-hidden rounded-xl">
                <Image
                  src={collection.image}
                  alt={collection.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
                  <h3 className="text-xl font-semibold mb-2">{collection.name}</h3>
                  <p className="text-sm text-white/80 line-clamp-2">{collection.description}</p>
                  <span className="inline-block mt-4 text-sm font-medium border-b border-white pb-1 transition-all group-hover:border-transparent">
                    Смотреть коллекцию
                  </span>
                </div>
              </div>
            </motion.div>
          </Link>
        ))}
      </div>
    </section>
  )
}