import type { ComponentType, ReactNode } from "react";
import { Badge } from "@/components/ui/badge";

export function DeskHero({
  kicker,
  title,
  description,
  badge,
  actions,
}: {
  kicker: string;
  title: string;
  description: string;
  badge?: string;
  actions?: ReactNode;
}) {
  return (
    <section className="club-hero mb-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="min-w-0">
          <p className="mb-3 text-[11px] font-medium tracking-[0.18em] text-primary uppercase">{kicker}</p>
          <h1 className="font-display text-3xl font-semibold sm:text-4xl">{title}</h1>
          <p className="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base">{description}</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {badge ? <Badge variant="default">{badge}</Badge> : null}
          {actions}
        </div>
      </div>
    </section>
  );
}

export function StatTile({
  label,
  value,
  hint,
  icon: Icon,
}: {
  label: string;
  value: string | number;
  hint: string;
  icon: ComponentType<{ className?: string }>;
}) {
  return (
    <div className="stat-tile min-w-0 rounded-xl bg-card p-5 shadow-[var(--shadow-border)]">
      <div className="flex items-start gap-3">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
          <Icon className="size-4" />
        </span>
        <div className="min-w-0">
          <p className="text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase">{label}</p>
          <p className="mt-1 font-display text-3xl tabular leading-none">{value}</p>
          <p className="mt-1.5 text-xs text-muted-foreground">{hint}</p>
        </div>
      </div>
    </div>
  );
}

export function DeskSkeleton() {
  return (
    <div className="space-y-4" aria-busy="true" aria-label="Loading desk">
      <div className="h-36 animate-pulse rounded-xl bg-muted" />
      <div className="grid gap-3 sm:grid-cols-3">
        <div className="h-28 animate-pulse rounded-xl bg-muted" />
        <div className="h-28 animate-pulse rounded-xl bg-muted" />
        <div className="h-28 animate-pulse rounded-xl bg-muted" />
      </div>
      <div className="h-64 animate-pulse rounded-xl bg-muted" />
    </div>
  );
}