import type { CSSProperties, ReactNode } from "react";

export function Swatch({
  colour,
  label,
  detail,
  actions,
  large = false,
}: {
  colour: string;
  label: string;
  detail?: string;
  actions?: ReactNode;
  large?: boolean;
}) {
  return (
    <article className={`swatch-card${large ? " swatch-card--large" : ""}`}>
      <div
        className="swatch-colour checkerboard"
        style={{ "--swatch": colour } as CSSProperties}
        aria-label={`${label}: ${detail ?? colour}`}
      />
      <div className="swatch-meta">
        <strong>{label}</strong>
        <code>{detail ?? colour}</code>
      </div>
      {actions && <div className="swatch-actions">{actions}</div>}
    </article>
  );
}