export function StatColumn({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="text-right shrink-0 flex-1 sm:flex-none">
      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
        {label}
      </p>
      <div className="flex items-baseline justify-end gap-1">{children}</div>
    </div>
  );
}

export function StatDivider() {
  return <div className="h-8 w-px bg-border shrink-0 self-center" />;
}

export function RankChangeIndicator({ delta }: { delta: number }) {
  if (delta === 0) return null;
  if (delta > 0) {
    return (
      <span className="text-xs font-semibold text-primary" aria-label={`up ${delta}`}>
        ▲{delta}
      </span>
    );
  }
  return (
    <span
      className="text-xs font-semibold"
      style={{ color: "var(--coral-accent, #ef4444)" }}
      aria-label={`down ${Math.abs(delta)}`}
    >
      ▼{Math.abs(delta)}
    </span>
  );
}

export function RankingDisplay({
  displayRank,
  rankChange,
}: {
  displayRank: string | number;
  rankChange?: number;
}) {
  return (
    <StatColumn label="Ranking">
      <span className="text-2xl font-bold leading-none">{displayRank}</span>
      {rankChange !== undefined && rankChange !== 0 && (
        <RankChangeIndicator delta={rankChange} />
      )}
    </StatColumn>
  );
}

export function PointChangeIndicator({ delta }: { delta: number }) {
  if (delta >= 0) {
    return (
      <span className="text-xs font-semibold text-primary" aria-label={`+${Math.round(delta)} points`}>
        ▲{Math.round(delta)}
      </span>
    );
  }
  return (
    <span
      className="text-xs font-semibold"
      style={{ color: "var(--coral-accent, #ef4444)" }}
      aria-label={`${Math.round(delta)} points`}
    >
      ▼{Math.abs(Math.round(delta))}
    </span>
  );
}