import { Check } from "lucide-react";
import Badge from "@/components/ui/Badge";
import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";
import type { TariffPlan } from "@/types";

interface TariffTableProps {
  plans: TariffPlan[];
  contactHref?: string;
}

export default function TariffTable({ plans, contactHref = "/#kontakt" }: TariffTableProps) {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {plans.map((plan) => (
        <div
          key={plan.name}
          className={cn(
            "relative flex flex-col rounded-card border bg-white p-6 shadow-sm transition-shadow hover:shadow-md",
            plan.recommended
              ? "border-primary-500 ring-1 ring-primary-500"
              : "border-neutral-200"
          )}
        >
          {plan.recommended && (
            <div className="absolute -top-3 left-6">
              <Badge variant="popular">Beliebt</Badge>
            </div>
          )}
          <div className="mb-4">
            <h3 className="text-lg font-semibold text-neutral-900">{plan.name}</h3>
            <p className="mt-2 text-2xl font-bold text-neutral-900">{plan.price}</p>
          </div>
          <ul className="flex-1 space-y-3">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-start gap-2 text-sm text-neutral-600">
                <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-600" aria-hidden="true" />
                {feature}
              </li>
            ))}
          </ul>
          <Button
            href={contactHref}
            variant={plan.recommended ? "primary" : "outline"}
            size="sm"
            className="mt-6 w-full"
          >
            Jetzt anfragen
          </Button>
        </div>
      ))}
    </div>
  );
}
