import type { ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface PricingTier {
  name: string;
  price: ReactNode;
  period?: string;
  description?: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
  badge?: string;
}

export interface PricingProps {
  title?: ReactNode;
  subtitle?: ReactNode;
  tiers: PricingTier[];
  className?: string;
}

export function Pricing({ title, subtitle, tiers, className }: PricingProps) {
  return (
    <section className={cn('w-full py-16 md:py-24 bg-bg', className)}>
      <div className="mx-auto max-w-7xl px-4 md:px-6">
        {(title || subtitle) && (
          <div className="mx-auto max-w-2xl text-center mb-12 md:mb-16">
            {title && (
              <h2 className="font-display font-semibold tracking-tight text-text text-3xl md:text-4xl">
                {title}
              </h2>
            )}
            {subtitle && (
              <p className="mt-4 text-lg text-text-2">{subtitle}</p>
            )}
          </div>
        )}

        <div className="grid gap-6 grid-cols-1 md:grid-cols-3">
          {tiers.map((tier) => (
            <div
              key={tier.name}
              className={cn(
                'relative flex flex-col rounded-2xl border p-6 md:p-8',
                tier.featured
                  ? 'bg-surface border-primary shadow-lg ring-1 ring-primary-ring'
                  : 'bg-surface border-border'
              )}
            >
              {tier.badge && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center px-3 py-1 rounded-full bg-primary text-primary-on text-xs font-medium uppercase tracking-wider">
                  {tier.badge}
                </span>
              )}
              <h3 className="text-lg font-semibold text-text">{tier.name}</h3>
              {tier.description && (
                <p className="mt-2 text-sm text-text-2">{tier.description}</p>
              )}
              <div className="mt-5 flex items-baseline gap-1">
                <span className="text-4xl font-display font-bold tracking-tight text-text tab-num">
                  {tier.price}
                </span>
                {tier.period && (
                  <span className="text-sm text-text-3">/{tier.period}</span>
                )}
              </div>

              <ul className="mt-6 flex flex-col gap-3 flex-1">
                {tier.features.map((f, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-text-2">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 shrink-0 text-success">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a
                href={tier.cta.href}
                className={cn(
                  'mt-8 inline-flex items-center justify-center h-11 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring',
                  tier.featured
                    ? 'bg-primary text-primary-on hover:bg-primary-hover'
                    : 'border border-border bg-surface text-text hover:bg-surface-2'
                )}
              >
                {tier.cta.label}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}