interface ColorSwatchProps {
  colorHex: string
  size?: number
}

export default function ColorSwatch({ colorHex, size = 24 }: ColorSwatchProps) {
  return (
    <div
      className="rounded-full border border-slate-600 shadow-sm inline-block"
      style={{
        backgroundColor: colorHex.startsWith('#') ? colorHex : `#${colorHex}`,
        width: size,
        height: size,
      }}
      title={colorHex}
    />
  )
}