import { kindStyle, type KindDef } from './kinds'

/** A kind's mini shape swatch: true proportions, its own fill and stroke — the
 *  toolkit's "icon" is the thing itself, not a glyph. */
export function KindSwatch({ def, compact = false }: { def: KindDef; compact?: boolean }) {
  const st = kindStyle(def.kind)
  const f = 24 / Math.max(def.widthCm, def.heightCm)
  const w = def.widthCm * f
  const h = def.heightCm * f
  return (
    <svg
      width={compact ? 30 : 38}
      height={compact ? 24 : 30}
      viewBox={compact ? '-20 -13 40 26' : '-20 -15 40 30'}
      className="flex-none"
      aria-hidden
    >
      {def.shape === 'rect' ? (
        <rect x={-w / 2} y={-h / 2} width={w} height={h} rx={3} fill={st.fill} stroke={st.stroke} strokeWidth={1.5} strokeDasharray={st.dash ? '3 3' : undefined} />
      ) : (
        <circle r={w / 2} fill={st.fill} stroke={st.stroke} strokeWidth={1.5} strokeDasharray={st.dash ? '3 3' : undefined} />
      )}
    </svg>
  )
}