import { motion } from "framer-motion"
import { Zap } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { cn, formatRupiah } from "@/utils/helpers"
import type { PackageData } from "@/types/site"

interface PackageCardProps {
  pkg: PackageData
  index: number
  onSelect: (pkg: PackageData) => void
}

export default function PackageCard({ pkg, index, onSelect }: PackageCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: index * 0.1 }}
      viewport={{ once: true }}
      className={cn(
        "relative bg-white border-4 border-black rounded-lg p-6 shadow-brutal hover-lift",
        pkg.popular && "bg-yellow-200"
      )}
    >
      {pkg.popular && (
        <div className="absolute -top-4 left-1/2 -translate-x-1/2">
          <Badge className="bg-red-500 hover:bg-red-600 text-white border-2 border-black font-black px-4 py-1 text-sm">
            TERPOPULER
          </Badge>
        </div>
      )}

      <div className="text-center space-y-4">
        <h3 className="font-black text-xl">{pkg.name}</h3>

        <div className="flex items-center justify-center gap-1 text-4xl font-black">
          <Zap className="h-7 w-7 text-yellow-500" />
          <span>{pkg.speed}</span>
          <span className="text-lg">Mbps</span>
        </div>

        <ul className="space-y-2 text-left">
          {pkg.features.map((feature, i) => (
            <li key={i} className="flex items-center gap-2 text-sm font-bold">
              <span className="text-green-500 font-black">&#10003;</span>
              {feature}
            </li>
          ))}
        </ul>

        <div className="pt-2">
          <div className="text-3xl font-black">{formatRupiah(pkg.price)}</div>
          <div className="text-sm font-bold text-gray-500">/Bulan</div>
        </div>

        <Button
          variant="brutal"
          className={cn(
            "w-full font-black",
            pkg.popular
              ? "bg-red-500 hover:bg-red-600 text-white"
              : "bg-green-400 hover:bg-green-500"
          )}
          onClick={() => onSelect(pkg)}
        >
          Pilih Paket
        </Button>
      </div>
    </motion.div>
  )
}