import Link from 'next/link';

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  cn,
} from '@gib/ui';

import type { LandingPricingContent } from './content';

interface PricingProps {
  content: LandingPricingContent;
}

export const Pricing = ({ content }: PricingProps) => (
  <section id='pricing' className='container mx-auto px-4 py-24'>
    <div className='mx-auto max-w-6xl'>
      <div className='mb-16 text-center'>
        <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
          {content.heading}
        </h2>
        <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
          {content.description}
        </p>
      </div>

      <div className='grid gap-6 xl:grid-cols-3'>
        {content.plans.map((plan) => (
          <Card
            key={plan.name}
            className={cn(
              'border-border/50 relative flex h-full flex-col',
              plan.isHighlighted &&
                'border-primary/60 shadow-primary/10 bg-muted/30 shadow-xl',
            )}
          >
            <CardHeader className='space-y-4'>
              <div className='flex items-start justify-between gap-4'>
                <div>
                  <CardTitle className='text-2xl'>{plan.name}</CardTitle>
                  <p className='text-muted-foreground mt-2 text-sm'>
                    {plan.description}
                  </p>
                </div>
                {plan.badge ? <Badge>{plan.badge}</Badge> : null}
              </div>
              <div>
                <div className='flex items-end gap-2'>
                  <span className='text-4xl font-bold tracking-tight'>
                    {plan.price}
                  </span>
                  <span className='text-muted-foreground pb-1 text-sm'>
                    {plan.billingPeriod}
                  </span>
                </div>
              </div>
            </CardHeader>
            <CardContent className='flex flex-1 flex-col gap-6'>
              <ul className='space-y-3'>
                {plan.features.map((feature) => (
                  <li key={feature} className='flex items-start gap-3 text-sm'>
                    <span className='text-primary mt-0.5'>✓</span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <Button
                className='mt-auto w-full'
                variant={plan.isHighlighted ? 'default' : 'outline'}
                asChild
              >
                <Link href={plan.ctaUrl}>{plan.ctaLabel}</Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  </section>
);
