import { cn } from "@/lib/utils";

import type { EventStatus } from "@/lib/types";

const LABELS: Record<EventStatus, string> = {

  announced: "Announced",

  presale: "Presale",

  onsale: "On Sale",

  soldout: "Sold Out",

  cancelled: "Cancelled",

};

const VARS: Record<EventStatus, string> = {

  announced: "var(--color-status-announced)",

  presale: "var(--color-status-presale)",

  onsale: "var(--color-status-onsale)",

  soldout: "var(--color-status-soldout)",

  cancelled: "var(--color-status-cancelled)",

};

export function StatusPill({ status, className }: { status: EventStatus; className?: string }) {

  const c = VARS[status];

  return (

    <span

      className={cn(

        "inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] px-2.5 py-0.5 text-xs font-medium",

        className,

      )}

      style={{

        color: c,

        backgroundColor: `color-mix(in oklch, ${c} 12%, transparent)`,

        border: `1px solid color-mix(in oklch, ${c} 25%, transparent)`,

      }}

    >

      <span

        className={cn("h-1.5 w-1.5 rounded-full", status === "onsale" && "pulse-ring")}

        style={{ backgroundColor: c }}

        aria-hidden

      />

      {LABELS[status]}

    </span>

  );

}