import React from 'react'

type Variant = 'mark' | 'ribbonS' | 'badge' | 'crane' | 'craneOutline'

type Props = {
  variant?: Variant
  height?: number
  color?: string
  className?: string
  title?: string
  strokeWidth?: number
}

/**
 * Origami-style dragon logo for small header placement.
 * - Uses currentColor by default so it adapts to surrounding text color.
 * - Keep height around 20–24px in compact headers.
 */
export const OrigamiDragonLogo: React.FC<Props> = ({
  variant = 'crane',
  height = 20,
  color = 'currentColor',
  className = '',
  title = 'Soryu logo',
  strokeWidth = 12,
}) => {
  if (variant === 'craneOutline') {
    // Outline rendition inspired by provided licensed crane icon
    return (
      <svg
        className={className}
        role="img"
        aria-label={title}
        width={height}
        height={height}
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        style={{ display: 'inline-block', verticalAlign: 'middle', color }}
      >
        <title>{title}</title>
        <g fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round">
          {/* Left tail → left wing base → body pivot */}
          <path d="M10 60 L36 76 L18 42 L42 58" />
          {/* Left wing upstroke */}
          <path d="M42 58 L26 12" />
          {/* Left wing inner crease to pivot */}
          <path d="M26 12 L50 62" />
          {/* Body lower crease */}
          <path d="M30 76 L50 62" />
          {/* Center mast (rear triangle) */}
          <path d="M50 62 L58 16 L64 70" />
          {/* Right wing outer edge */}
          <path d="M50 62 L72 30 L66 78" />
          {/* Right wing inner crease */}
          <path d="M72 30 L60 52" />
          {/* Neck and head */}
          <path d="M66 78 L82 54 L90 40 L96 56" />
          {/* Neck inner crease */}
          <path d="M82 54 L72 44" />
        </g>
      </svg>
    )
  }
  if (variant === 'crane') {
    // Origami crane silhouette with a dragon head
    return (
      <svg
        className={className}
        role="img"
        aria-label={title}
        width={height}
        height={height}
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        style={{ display: 'inline-block', verticalAlign: 'middle', color }}
      >
        <title>{title}</title>
        {/* Left/up wing */}
        <polygon points="46,48 22,24 40,52" fill="currentColor" opacity="0.95" />
        {/* Right/down wing */}
        <polygon points="52,52 78,76 58,54" fill="currentColor" opacity="0.78" />
        {/* Body (diamond) */}
        <polygon points="44,52 52,46 58,52 50,60" fill="currentColor" opacity="0.88" />
        {/* Tail */}
        <polygon points="44,60 34,70 46,64" fill="currentColor" opacity="0.7" />
        {/* Neck */}
        <polygon points="58,46 76,40 74,44 56,50" fill="currentColor" opacity="0.9" />
        {/* Dragon head (top plane) */}
        <polygon points="76,40 90,38 82,46" fill="currentColor" opacity="0.95" />
        {/* Dragon jaw plane */}
        <polygon points="74,44 90,46 82,50" fill="currentColor" opacity="0.8" />
        {/* Small horn */}
        <polygon points="86,36 92,38 88,42" fill="currentColor" opacity="0.85" />
      </svg>
    )
  }
  if (variant === 'mark') {
    // Angular origami dragon head/neck, faceted into simple planes
    return (
      <svg
        className={className}
        role="img"
        aria-label={title}
        width={height}
        height={height}
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        style={{ display: 'inline-block', verticalAlign: 'middle', color }}
      >
        <title>{title}</title>
        {/* Upper head */}
        <polygon points="60,22 86,16 73,34 58,30" fill="currentColor" opacity="0.95" />
        {/* Snout / jaw plane */}
        <polygon points="58,30 73,34 90,30 71,45" fill="currentColor" opacity="0.8" />
        {/* Neck planes */}
        <polygon points="58,30 71,45 56,60 40,66 30,72 22,64 46,48" fill="currentColor" opacity="0.9" />
        <polygon points="22,64 30,72 18,74 26,60" fill="currentColor" opacity="0.65" />
        {/* Small ear/horn suggestion */}
        <polygon points="78,18 86,16 82,24" fill="currentColor" opacity="0.7" />
      </svg>
    )
  }

  if (variant === 'ribbonS') {
    // Folded ribbon forming an angular "S" silhouette
    return (
      <svg
        className={className}
        role="img"
        aria-label={title}
        width={height}
        height={height}
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        style={{ display: 'inline-block', verticalAlign: 'middle', color }}
      >
        <title>{title}</title>
        {/* Top fold */}
        <polygon points="22,32 62,18 70,26 30,40" fill="currentColor" opacity="0.95" />
        {/* Middle fold (turning back) */}
        <polygon points="30,40 70,26 60,46 20,60" fill="currentColor" opacity="0.8" />
        {/* Lower fold */}
        <polygon points="22,64 60,46 68,54 28,70" fill="currentColor" opacity="0.9" />
      </svg>
    )
  }

  // badge
  return (
    <svg
      className={className}
      role="img"
      aria-label={title}
      width={height}
      height={height}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'inline-block', verticalAlign: 'middle', color }}
    >
      <title>{title}</title>
      {/* Hex container */}
      <polygon
        points="50,6 83,25 83,75 50,94 17,75 17,25"
        fill="none"
        stroke="currentColor"
        strokeWidth="8"
        strokeLinejoin="round"
        opacity="0.9"
      />
      {/* Mini mark inside */}
      <g transform="translate(0,2) scale(0.85) translate(10,6)">
        <polygon points="60,22 86,16 73,34 58,30" fill="currentColor" opacity="0.95" />
        <polygon points="58,30 73,34 90,30 71,45" fill="currentColor" opacity="0.8" />
        <polygon points="58,30 71,45 56,60 40,66 30,72 22,64 46,48" fill="currentColor" opacity="0.9" />
      </g>
    </svg>
  )
}

export default OrigamiDragonLogo