import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { IoCheckmark } from "react-icons/io5"

interface PricingCardProps {
  tier: string
  price: string
  description: string
  features: string[]
  popular?: boolean
  className?: string
}

export function PricingCard({
  tier = "Basic",
  price = "$10",
  description = "All the basics for getting started",
  features = ["Feature 1", "Feature 2", "Feature 3"],
  popular = false,
  className,
}: PricingCardProps) {
  return (
    <Card className={`${className} ${popular ? "border-primary shadow-md" : ""}`}>
      {popular && (
        <div className="absolute -top-3 left-0 right-0 mx-auto w-fit rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
          Most Popular
        </div>
      )}
      <CardHeader>
        <CardTitle className="text-xl">{tier}</CardTitle>
        <div className="flex items-baseline gap-1">
          <span className="text-3xl font-bold">{price}</span>
          <span className="text-muted-foreground">/month</span>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="space-y-2">
          {features.map((feature, i) => (
            <li key={i} className="flex items-center gap-2">
              <IoCheckmark className="h-4 w-4 text-primary" />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button className="w-full" variant={popular ? "default" : "outline"}>
          Get Started
        </Button>
      </CardFooter>
    </Card>
  )
}