'use client'

import { Check } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import Link from 'next/link'

interface PricingCardProps {
  tier: string
  price: number
  currency: string
  features: string[]
  popular?: boolean
  planId: string
}

export function PricingCard({ tier, price, currency, features, popular, planId }: PricingCardProps) {
  return (
    <Card
      className={`relative bg-card border-border rounded-xl transition-all duration-300 ${
        popular ? 'border-primary shadow-lg shadow-primary/20 scale-105' : 'hover:border-primary/50'
      }`}
    >
      {popular && (
        <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white">
          Most Popular
        </Badge>
      )}
      <CardContent className="p-6">
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-2">
            <h3 className="text-foreground font-bold text-2xl capitalize">{tier}</h3>
            <div className="flex items-baseline gap-1">
              <span className="text-4xl font-black text-foreground">
                {price}
              </span>
              <span className="text-muted-foreground">{currency}</span>
            </div>
          </div>

          <ul className="flex flex-col gap-3">
            {features.map((feature, index) => (
              <li key={index} className="flex items-start gap-3">
                <div className="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center mt-0.5">
                  <Check className="w-3 h-3 text-primary" />
                </div>
                <span className="text-sm text-muted-foreground">{feature}</span>
              </li>
            ))}
          </ul>

          <Button
            asChild
            className={`w-full ${
              popular
                ? 'glow-button bg-primary hover:bg-primary-glow text-white'
                : 'bg-card border border-border hover:border-primary text-foreground'
            } font-bold rounded-lg`}
          >
            <Link href={`/checkout?plan=${planId}`}>
              Select {tier}
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}