import { Button } from '@/components/ui/primitives/Button';
import type { Locale } from '@/lib/i18n';

type RelatedDealLink = {
  id: string;
  title: string;
  href: string;
  vendorName: string;
};

interface Props {
  locale: Locale;
  title: string;
  body: string;
  cta: string;
  relatedHeading: string;
  relatedDeals: RelatedDealLink[];
}

export function SystemPageExpiredDeal({
  locale,
  title,
  body,
  cta,
  relatedHeading,
  relatedDeals,
}: Props) {
  return (
    <main
      id="main"
      className="mx-auto flex min-h-[60dvh] w-full max-w-5xl flex-col gap-8 px-4 py-12 sm:px-6 lg:px-8"
    >
      <section className="bg-surface border-border-subtle rounded-[2rem] border px-6 py-10 text-center shadow-sm sm:px-10">
        <div className="mx-auto max-w-2xl">
          <div className="bg-brand-primary-50 text-brand-primary-700 mx-auto mb-5 inline-flex h-16 w-16 items-center justify-center rounded-full text-lg font-black">
            MD
          </div>
          <h1 className="text-text-primary text-3xl font-black tracking-tight sm:text-4xl">
            {title}
          </h1>
          <p className="text-text-secondary mx-auto mt-3 max-w-xl text-base leading-7">{body}</p>
          <div className="mt-6">
            <Button asChild variant="primary" size="md">
              <a href={locale === 'en' ? '/en/' : '/'}>{cta}</a>
            </Button>
          </div>
        </div>
      </section>

      {relatedDeals.length > 0 && (
        <section
          aria-label={relatedHeading}
          className="bg-surface border-border-subtle rounded-[2rem] border px-5 py-6 shadow-sm sm:px-6"
        >
          <h2 className="text-text-primary text-xl font-bold">{relatedHeading}</h2>
          <div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {relatedDeals.map((deal) => (
              <a
                key={deal.id}
                href={deal.href}
                className="bg-surface-raised border-border-subtle hover:border-brand-primary-300 hover:bg-brand-primary-50/40 rounded-2xl border p-4 transition-colors"
              >
                <p className="text-text-primary leading-6 font-semibold">{deal.title}</p>
                <p className="text-text-muted mt-1 text-sm">{deal.vendorName}</p>
              </a>
            ))}
          </div>
        </section>
      )}
    </main>
  );
}