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

export type PricingPlan = {
  name: string;
  price: string;
  description: string;
  features: string[];
  cta: string;
  featured?: boolean;
};

export function PricingTable({ plans }: { plans: PricingPlan[] }) {
  return (
    <div className="grid gap-4 md:grid-cols-3">
      {plans.map((plan) => (
        <Card
          key={plan.name}
          className={cn(
            "relative flex h-full flex-col",
            plan.featured && "border-primary shadow-sm"
          )}
        >
          {plan.featured ? (
            <Badge className="absolute right-4 top-4" variant="default">
              Más elegido
            </Badge>
          ) : null}
          <CardHeader>
            <CardTitle className="text-lg">{plan.name}</CardTitle>
            <CardDescription>{plan.description}</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-1 flex-col gap-4">
            <div>
              <div className="text-3xl font-semibold">{plan.price}</div>
              <p className="text-sm text-muted-foreground">por mes</p>
            </div>
            <ul className="space-y-2 text-sm">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2">
                  <span className="h-1.5 w-1.5 rounded-full bg-primary" />
                  {feature}
                </li>
              ))}
            </ul>
            <Button className="mt-auto" variant={plan.featured ? "default" : "secondary"}>
              {plan.cta}
            </Button>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
Inicio

Pro

Empresa
