import { BASE_PALETTE } from '@dorfteich/shared';

/** Per-mode preview of a derived accent (issues #184/#186). Decorative only
 * — the visible preset/custom NAME carries the meaning, color is never the
 * only cue (ADR 0017). The rings show each mode's canonical background. */
export function AccentSwatches({
  light,
  dark,
}: {
  light: string;
  dark: string;
}): React.JSX.Element {
  return (
    <span className="accent-swatches" aria-hidden>
      <span
        className="accent-swatch"
        style={{ background: light, boxShadow: `0 0 0 3px ${BASE_PALETTE.light.bg}` }}
      />
      <span
        className="accent-swatch"
        style={{ background: dark, boxShadow: `0 0 0 3px ${BASE_PALETTE.dark.bg}` }}
      />
    </span>
  );
}