Seal

<Seal kanji="和" label="Harmony" variant="red" size={80} />

import { cn } from '@/lib/utils'

interface SealProps {
  kanji:     string
  label?:    string
  size?:     number
  variant?:  'red' | 'neutral'
  className?: string
}

export function Seal({
  kanji,
  label,
  size      = 80,
  variant   = 'neutral',
  className,
}: SealProps): React.JSX.Element {
  const isRed = variant === 'red'

  return (
    <div
      className={cn('haiku-seal', isRed ? '' : 'haiku-seal-neutral', className)}
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      <span
        className={cn('seal-kanji', isRed ? '' : 'seal-kanji-neutral')}
        style={{ fontSize: size * 0.45 }}
      >
        {kanji}
      </span>
      {label && (
        <span className={cn('seal-label', isRed ? '' : 'seal-label-neutral')}>
          {label}
        </span>
      )}
    </div>
  )
}