'use client'

import { motion } from 'framer-motion'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Check } from 'lucide-react'

interface AdTypeCardProps {
  type: string
  name: string
  description: string
  dimensions: string
  dailyRate: number
  visibility: string
  maxSlots: number
}

export function AdTypeCard({
  name,
  description,
  dimensions,
  dailyRate,
  visibility,
  maxSlots
}: AdTypeCardProps) {
  return (
    <motion.div
      whileHover={{ y: -8 }}
      transition={{ type: 'spring', stiffness: 300 }}
    >
      <Card className="h-full border-2 hover:border-[#3F5CEA] transition-all">
        <CardContent className="p-6">
          <Badge className="mb-4">{visibility} Visibility</Badge>
          <h3 className="text-2xl font-bold mb-2">{name}</h3>
          <p className="text-gray-600 mb-4">{description}</p>
          
          <div className="space-y-3 mb-6">
            <div className="flex items-center gap-2">
              <Check className="h-4 w-4 text-green-600" />
              <span className="text-sm">Size: {dimensions}</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-4 w-4 text-green-600" />
              <span className="text-sm">Up to {maxSlots} ads rotation</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-4 w-4 text-green-600" />
              <span className="text-sm">Click tracking included</span>
            </div>
          </div>
          
          <div className="border-t pt-4">
            <div className="text-3xl font-bold text-[#3F5CEA]">
              ${dailyRate}<span className="text-lg text-gray-600">/day</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  )
}