import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Link } from "react-router-dom"

interface PricingFeature {
  text: string
  included: boolean
}

interface PricingCardProps {
  name: string
  description: string
  price: string | null
  duration?: string
  features: PricingFeature[]
  popular?: boolean
  buttonText: string
  buttonVariant?: "default" | "outline"
  className?: string
}

export function PricingCard({
  name,
  description,
  price,
  duration = "mois",
  features,
  popular = false,
  buttonText,
  buttonVariant = "default",
  className,
}: PricingCardProps) {
  return (
    <Card
      className={`flex flex-col ${popular ? "border-orange-500 dark:border-orange-500 shadow-lg relative" : ""} ${className}`}
    >
      {popular && (
        <Badge className="absolute -top-2 right-4 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600">
          Populaire
        </Badge>
      )}

      <CardHeader>
        <CardTitle className="text-xl">{name}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>

      <CardContent className="grid gap-4 flex-1">
        <div className="flex items-baseline gap-1">
          {price ? (
            <>
              <span className="text-3xl font-bold">{price}€</span>
              <span className="text-sm text-muted-foreground">/{duration}</span>
            </>
          ) : (
            <span className="text-3xl font-bold">Gratuit</span>
          )}
        </div>

        <ul className="grid gap-2 text-sm">
          {features.map((feature, index) => (
            <li key={index} className="flex items-center gap-2">
              <Check className={`h-4 w-4 ${feature.included ? "text-green-500" : "text-muted-foreground"}`} />
              <span className={feature.included ? "" : "text-muted-foreground line-through"}>{feature.text}</span>
            </li>
          ))}
        </ul>
      </CardContent>

      <CardFooter>
        <Link to="/auth/register" className="w-full">
          <Button
            variant={buttonVariant}
            className={`w-full ${popular && buttonVariant === "default" ? "bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600" : ""}`}
          >
            {buttonText}
          </Button>
        </Link>
      </CardFooter>
    </Card>
  )
}

