import Link from 'next/link';
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

export type PricingProps = {
  heading?: string;
  description?: string;
  billingNote?: string;
  plans?: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string;
    ctaLabel: string;
    ctaUrl: string;
    badge?: string;
    highlighted?: 'yes' | 'no';
  }>;
};

export default function Pricing({ heading = '', description = '', billingNote = '', plans = [] }: PricingProps) {
  return (
    <section id="pricing" className="scroll-mt-20 bg-background py-20 sm:py-28">
      <div className="section-shell">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
          {description && <p className="mt-4 text-base leading-7 text-muted-foreground">{description}</p>}
          {billingNote && <p className="mt-3 text-sm text-muted-foreground">{billingNote}</p>}
        </div>
        <div className={`mx-auto mt-12 grid max-w-6xl gap-8 ${plans.length > 2 ? 'lg:grid-cols-3' : 'md:grid-cols-2'}`}>
          {plans.map((plan, index) => (
            <article key={`${plan.name}-${index}`} className="h-full">
              <Card className={`h-full gap-0 bg-background py-0 shadow-none ${plan.highlighted === 'yes' ? 'border-brand ring-1 ring-brand/15' : ''}`}>
                <CardHeader className="p-7 pb-0">
                  <CardTitle><h3 className="text-xl font-medium">{plan.name}</h3></CardTitle>
                  {plan.badge && <CardAction><span className="rounded-full bg-background px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-brand">{plan.badge}</span></CardAction>}
                  <div className="col-span-full mt-5 flex items-end gap-1.5"><span className="text-5xl font-medium tracking-[-0.05em]">{plan.price}</span><span className="pb-1 text-sm text-muted-foreground">{plan.period}</span></div>
                  <CardDescription className="col-span-full mt-3 min-h-12 leading-6">{plan.description}</CardDescription>
                </CardHeader>
                <CardContent className="flex-1 px-7 pt-8">
                  <ul className="space-y-3">
                    {plan.features.split('\n').map((feature) => feature.trim()).filter(Boolean).map((feature) => <li key={feature} className="flex gap-2.5 text-sm"><Check className="mt-0.5 size-4 shrink-0 text-brand" aria-hidden="true" />{feature}</li>)}
                  </ul>
                </CardContent>
                <CardFooter className="p-7 pt-9">
                  <Button asChild variant={plan.highlighted === 'yes' ? 'default' : 'outline'} size="lg" className="w-full"><Link href={plan.ctaUrl}>{plan.ctaLabel}</Link></Button>
                </CardFooter>
              </Card>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}