'use client'

import * as motion from 'framer-motion/m'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'

interface CategoryOffer {
  id: number
  name: string
  icon: string
  discount: string
  link: string
  color: string
}

const categoryOffers: CategoryOffer[] = [
  { id: 1, name: 'Vegetables', icon: '🥬', discount: '20% OFF', link: '/category/vegetables', color: 'from-green-500 to-green-700' },
  { id: 2, name: 'Fruits', icon: '🍎', discount: '15% OFF', link: '/category/fruits', color: 'from-red-500 to-red-700' },
  { id: 3, name: 'Meat', icon: '🍗', discount: '10% OFF', link: '/category/meat', color: 'from-amber-500 to-amber-700' },
  { id: 4, name: 'Spices', icon: '🧂', discount: '25% OFF', link: '/category/spices', color: 'from-orange-500 to-orange-700' },
  { id: 5, name: 'Dairy', icon: '🥛', discount: '12% OFF', link: '/category/dairy', color: 'from-blue-500 to-blue-700' },
  { id: 6, name: 'Grocery', icon: '🛒', discount: '18% OFF', link: '/category/grocery', color: 'from-purple-500 to-purple-700' },
]

export default function CategoryOffers() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      {categoryOffers.map((offer, index) => (
        <motion.div
          key={offer.id}
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.05 }}
          whileHover={{ y: -5 }}
        >
          <Link href={offer.link} className="block text-center">
            <div className={`bg-gradient-to-br ${offer.color} rounded-xl p-4 text-white`}>
              <span className="text-4xl mb-2 block">{offer.icon}</span>
              <h3 className="font-semibold text-sm">{offer.name}</h3>
              <p className="text-xs text-white/80 mt-1">{offer.discount}</p>
            </div>
          </Link>
        </motion.div>
      ))}
    </div>
  )
}