brackt/app/components/draft/DraftPickCell.tsx

import { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from "react";
import { cn } from "~/lib/utils";
import type { SeasonStatus } from "~/models/season";

export type CoronaState =
  | { type: "eliminated"; points: 0 }
  | { type: "pending" }
  | { type: "scored"; brightness: number; points: number };

type CoronaVariant =
  | "gradient"
  | "electric"
  | "emerald"
  | "amber"
  | "coral";

type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
  pickNumber: number;
  round: number;
  pickInRound: number;
  state: "picked" | "current" | "upcoming";
  pick?: {
    participant: { name: string };
    sport: { name: string };
  };
  corona?: CoronaVariant;
  coronaState?: CoronaState;
  seasonStatus?: SeasonStatus;
  draftPaused?: boolean;
};

const coronaClasses: Record<CoronaVariant, string> = {
  gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]",
  electric: "bg-electric",
  emerald: "bg-emerald-500",
  amber: "bg-amber-accent",
  coral: "bg-coral-accent",
};

function getCoronaStyle(cs: CoronaState): CSSProperties {
  switch (cs.type) {
    case "eliminated":
      return { background: "oklch(0.45 0.20 25)" };
    case "pending":
      return { background: "rgba(255, 255, 255, 0.08)" };
    case "scored":
      return {
        background: "linear-gradient(to bottom, #adf661, #2ce1c1)",
        opacity: cs.brightness,
      };
  }
}

export const DraftPickCell = forwardRef<HTMLDivElement, DraftPickCellProps>(
function DraftPickCell({
  pickNumber,
  round,
  pickInRound,
  state,
  pick,
  corona = "gradient",
  coronaState,
  seasonStatus,
  draftPaused,
  className,
  children,
  ...rest
}, ref) {
  const isCurrent = state === "current";
  const showCorona = !isCurrent;

  let currentLabel = "On The Clock";
  if (seasonStatus === "pre_draft") {
    currentLabel = "Up Next";
  } else if (seasonStatus === "draft" && draftPaused) {
    currentLabel = "Paused Draft";
  }

  return (
    <div
      ref={ref}
      className={cn(
        "relative flex-1 min-w-20 overflow-hidden",
        className,
      )}
      {...rest}
    >
      {isCurrent ? (
        <div className="absolute inset-0 rounded-lg [background:linear-gradient(to_bottom,#adf661,#2ce1c1)] animate-pulse-gradient" />
      ) : coronaState ? (
        <div
          className="absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg"
          style={getCoronaStyle(coronaState)}
        />
      ) : state === "picked" ? (
        <div
          className={cn(
            "absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg",
            coronaClasses[corona],
          )}
        />
      ) : state === "upcoming" ? (
        <div
          className="absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg"
          style={{ background: "rgba(255, 255, 255, 0.08)" }}
        />
      ) : null}
      <div
        className={cn(
          "relative z-10 h-14 border-2 rounded-lg p-1.5 transition-all",
          (showCorona || isCurrent) && "mr-1",
          isCurrent
            ? "bg-muted/80 border-transparent"
            : showCorona
              ? "bg-muted border-transparent"
              : "border-border bg-card",
        )}
        title={`Overall Pick #${pickNumber}`}
      >
        <div className={cn("flex flex-col", isCurrent ? "items-center justify-center h-full" : "gap-0.5")}>
          {!isCurrent && (
            <div className="flex items-center justify-between">
              <div className="text-[10px] font-mono text-muted-foreground leading-3">
                {round}.{String(pickInRound).padStart(2, "0")}
              </div>
              {coronaState && coronaState.type !== "pending" && (
                <span className={`text-[10px] font-mono font-bold ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
                  {coronaState.type === "scored" && "▲"}{coronaState.points}
                </span>
              )}
            </div>
          )}
          {state === "picked" && pick ? (
            <>
              <div className="font-semibold truncate text-xs leading-4">{pick.participant.name}</div>
              <div className="text-muted-foreground truncate text-[10px] leading-3">
                {pick.sport.name}
              </div>
            </>
          ) : isCurrent ? (
            <div className="text-sm font-bold text-white">{currentLabel}</div>
          ) : null}
        </div>
        {children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
      </div>
    </div>
  );
});