import type { SVGProps } from "react";
import { CircleAlert, CircleCheck, Info, TriangleAlert } from "@sub-design/icons";
import { cva } from "class-variance-authority";

import { cn } from "./cn";

/*
 * Proposed in roadmap.md's "Status is encoded by hue alone": a mark that
 * carries state in colour and nothing else is invisible under deuteranopia —
 * checked directly, the three light-theme feedback dots resolve to
 * indistinguishable greenish-browns for roughly 6% of men. `--warning` is
 * correct as tuned (an ink colour, AA as text); the fix moves meaning onto
 * the glyph and lets hue stay reinforcement rather than the only signal.
 *
 * Deliberately not a `Badge`: this has no text slot and no host-element
 * choice, because it is one thing — an icon carrying a feedback state. A
 * bare icon has no accessible name by default (findings.md #17 and #21,
 * the same lesson twice for Tooltip and Select), so `label` is required
 * rather than optional; there is no safe default to fall back to.
 *
 * Warning gets its own shape (triangle) rather than joining the circular
 * family success/info/destructive share, matching the universal caution-sign
 * convention roadmap.md named directly ("triangle for caution, exclamation
 * for critical, check for healthy").
 */
const statusMarkVariants = cva("size-4 shrink-0", {
  variants: {
    variant: {
      success: "text-(color:--color-feedback-success-content)",
      warning: "text-(color:--color-feedback-warning-content)",
      info: "text-(color:--color-feedback-info-content)",
      destructive: "text-(color:--color-feedback-destructive-content)",
    },
  },
  defaultVariants: {
    variant: "info",
  },
});

const icons = {
  success: CircleCheck,
  warning: TriangleAlert,
  info: Info,
  destructive: CircleAlert,
} as const;

export interface StatusMarkProps extends Omit<SVGProps<SVGSVGElement>, "children"> {
  variant: keyof typeof icons;
  /** The status this mark communicates — read by assistive tech in place of colour. */
  label: string;
}

function StatusMark({ variant, label, className, ...props }: StatusMarkProps) {
  const Icon = icons[variant];
  return (
    <Icon
      role="img"
      aria-label={label}
      data-slot="status-mark"
      className={cn(statusMarkVariants({ variant }), className)}
      {...props}
    />
  );
}

export { StatusMark, statusMarkVariants };