/**
 * Proste schematy boczne typu kilu — orientacyjnie po wyborze w formularzu ogłoszenia.
 */
import { memo } from 'react'

const hullPath =
  'M8 18 L14 14 L106 14 L112 18 L112 22 L8 22 Z'

type Props = {
  keelType: string
  className?: string
}

export const KeelTypeDiagram = memo(function KeelTypeDiagram({ keelType, className = '' }: Props) {
  if (!keelType || keelType === 'na') return null

  const common = {
    viewBox: '0 0 120 56',
    className: `h-14 w-full max-w-xs text-slate-600 ${className}`,
    fill: 'none',
    xmlns: 'http://www.w3.org/2000/svg',
  } as const
  const water = <path d="M4 24 H116" stroke="currentColor" strokeWidth="0.75" strokeDasharray="2 2" opacity={0.45} />
  const hull = <path d={hullPath} fill="currentColor" fillOpacity={0.12} stroke="currentColor" strokeWidth={1.1} />

  switch (keelType) {
    case 'long_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M18 22 L22 42 L98 42 L102 22" fill="currentColor" fillOpacity={0.22} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'fin_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M58 22 L62 46 L68 46 L62 22 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'wing_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M54 22 L58 40 L62 46 L66 40 L70 22 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'bulb_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M60 22 L62 38" stroke="currentColor" strokeWidth={2} />
          <ellipse cx="62" cy="43" rx="7" ry="5" fill="currentColor" fillOpacity={0.28} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'twin_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M38 22 L32 44 L36 44 L40 22 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
          <path d="M80 22 L86 44 L82 44 L78 22 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'bilge_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M28 22 L18 36 L22 38 L32 24 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
          <path d="M88 22 L98 36 L94 38 L84 24 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'lifting_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <rect x="56" y="10" width="10" height="8" rx="1" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth={0.9} />
          <path d="M61 18 L61 44 L65 44 L65 18" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'swing_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <circle cx="62" cy="21" r="3" fill="currentColor" fillOpacity={0.2} stroke="currentColor" strokeWidth={1} />
          <path d="M62 24 L52 46 L58 47 L64 26 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'centerboard':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M60 16 L55 22 L60 22 L65 22 Z" fill="currentColor" fillOpacity={0.12} />
          <path d="M60 22 L58 48 L64 48 L62 22 Z" fill="currentColor" fillOpacity={0.22} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'daggerboard':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M59 14 H63 V48 H59 Z" fill="currentColor" fillOpacity={0.22} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'keel_centerboard':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M50 22 L54 42 L58 42 L54 22 Z" fill="currentColor" fillOpacity={0.22} stroke="currentColor" strokeWidth={1} />
          <path d="M72 22 L70 46 L76 46 L74 22 Z" fill="currentColor" fillOpacity={0.2} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'shoal_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <path d="M48 22 L88 22 L82 34 L54 34 Z" fill="currentColor" fillOpacity={0.25} stroke="currentColor" strokeWidth={1} />
        </svg>
      )
    case 'other_keel':
      return (
        <svg {...common} aria-hidden>
          {water}
          {hull}
          <text x="60" y="40" textAnchor="middle" fontSize="9" fill="currentColor" opacity={0.55}>
            ?
          </text>
        </svg>
      )
    default:
      return null
  }
})