import * as React from "react"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export interface PricingCardProps extends React.ComponentProps<typeof Card> {
  plan: string
  price: string
  period?: string
  description?: string
  features: string[]
  cta?: string
  /** Highlights the card with a ring + badge — the "recommended" plan. */
  featured?: boolean
  onSelect?: () => void
}

/**
 * PricingCard — pricing tier composed from Card + Badge + Button + check list.
 */
export function PricingCard({
  plan,
  price,
  period = "/mo",
  description,
  features,
  cta = "Get started",
  featured = false,
  onSelect,
  className,
  ...props
}: PricingCardProps) {
  return (
    <Card
      className={cn(
        "relative gap-6",
        featured && "ring-primary ring-2",
        className
      )}
      {...props}
    >
      {featured && (
        <Badge className="absolute -top-3 left-6">Most popular</Badge>
      )}
      <CardHeader>
        <CardDescription>{plan}</CardDescription>
        <CardTitle className="flex items-baseline gap-1">
          <span className="text-4xl font-bold tracking-tight">{price}</span>
          <span className="text-muted-foreground text-sm font-normal">
            {period}
          </span>
        </CardTitle>
        {description && <CardDescription>{description}</CardDescription>}
      </CardHeader>
      <CardContent>
        <ul className="space-y-2.5 text-sm">
          {features.map((f) => (
            <li key={f} className="flex items-center gap-2">
              <Check className="text-primary size-4 shrink-0" />
              <span>{f}</span>
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button
          className="w-full"
          variant={featured ? "default" : "outline"}
          onClick={onSelect}
        >
          {cta}
        </Button>
      </CardFooter>
    </Card>
  )
}