import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { buttonVariants } from "@/components/ui/button";

type Metric = {
  label: string;
  value: string;
  detail?: string;
};

type Section = {
  id: string;
  title: string;
  description: string;
  bullets: string[];
};

type ModulePageProps = {
  eyebrow?: string;
  title: string;
  description?: string;
  primaryAction?: {
    label: string;
    href: string;
  };
  metrics?: Metric[];
  sections: Section[];
};

export function ModulePage({
  title,
  primaryAction,
  metrics = [],
  sections,
}: ModulePageProps) {
  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight md:text-3xl">{title}</h2>
        </div>

        {primaryAction ? (
          <Link href={primaryAction.href} className={buttonVariants({ className: "w-full lg:w-auto" })}>
            {primaryAction.label}
          </Link>
        ) : null}
      </div>

      {metrics.length ? (
        <div className="space-y-4">
          {metrics.map((metric) => (
            <Card key={metric.label}>
              <CardContent className="flex flex-col gap-2 p-4 md:p-4">
                <p className="text-sm font-medium text-muted-foreground">{metric.label}</p>
                <div>
                  <div className="text-3xl font-semibold tracking-tight">{metric.value}</div>
                  {metric.detail ? <p className="mt-1 text-xs text-muted-foreground">{metric.detail}</p> : null}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : null}

      <div className="space-y-4">
        {sections.map((section) => (
          <Card key={section.id} id={section.id} className="scroll-mt-24">
            <CardHeader>
              <CardTitle>{section.title}</CardTitle>
              <p className="text-sm text-muted-foreground">{section.description}</p>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-sm text-foreground/80">
                {section.bullets.map((bullet) => (
                  <li key={bullet} className="flex gap-2">
                    <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}