'use client'

import * as motion from 'framer-motion/m'
import Link from 'next/link'
import { Tag, Clock, ChevronRight } from 'lucide-react'

interface OfferCardProps {
  id: number
  title: string
  description: string
  discount: string
  code?: string
  validUntil: string
  image: string
  link: string
  type: 'product' | 'category' | 'coupon'
}

export default function OfferCard({ title, description, discount, code, validUntil, image, link, type }: OfferCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      whileHover={{ y: -5 }}
      className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-all duration-300"
    >
      <div className="flex">
        {/* Left - Image/Icon */}
        <div className="w-28 bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
          <span className="text-4xl">{image}</span>
        </div>
        
        {/* Right - Content */}
        <div className="flex-1 p-4">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h3 className="font-semibold text-dark">{title}</h3>
              <p className="text-sm text-gray-custom mt-1">{description}</p>
            </div>
            <div className="bg-primary/10 px-2 py-1 rounded-full">
              <span className="text-primary font-bold text-sm">{discount}</span>
            </div>
          </div>
          
          <div className="flex flex-wrap justify-between items-center mt-3">
            <div className="flex items-center gap-3 text-xs text-gray-custom">
              {code && (
                <div className="flex items-center gap-1">
                  <Tag size={12} />
                  <span>Code: <span className="font-mono font-semibold text-primary">{code}</span></span>
                </div>
              )}
              <div className="flex items-center gap-1">
                <Clock size={12} />
                <span>Valid till {validUntil}</span>
              </div>
            </div>
            
            <Link
              href={link}
              className="text-primary text-sm font-medium flex items-center gap-1 hover:gap-2 transition-all"
            >
              {type === 'coupon' ? 'Copy & Shop' : 'Shop Now'}
              <ChevronRight size={14} />
            </Link>
          </div>
        </div>
      </div>
    </motion.div>
  )
}