function CloudShape({ path }: { path: string }) {
  return <path d={path} fill="currentColor" />
}

const cloudLg =
  'M24 36c-9.941 0-18-6.268-18-14S14.059 8 24 8c2.2 0 4.28.45 6.16 1.26C33.1 4.54 38.78 2 45 2c11.046 0 20 7.82 20 17.5 0 .84-.06 1.66-.17 2.46C68.9 20.62 74.6 18 81 18c13.255 0 24 9.402 24 21S94.255 60 81 60H24Z'

const cloudMd =
  'M18 30C8.059 30 0 24.627 0 18S8.059 6 18 6c1.65 0 3.21.34 4.62.95C25.58 3.4 30.22 1 35 1c9.389 0 17 6.82 17 15.25 0 .7-.05 1.38-.14 2.05C55.12 16.35 59.68 14 65 14c11.046 0 20 8.402 20 18.5S76.046 51 65 51H18Z'

const cloudSm =
  'M14 22C6.82 22 1 17.523 1 12S6.82 2 14 2c1.28 0 2.5.26 3.6.72C19.98 1.13 23.52 0 27 0c7.18 0 13 5.82 13 13s-5.82 13-13 13H14Z'

const clouds = [
  { id: 1, path: cloudLg, viewBox: '0 0 120 48', className: 'auth-cloud--1' },
  { id: 2, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--2' },
  { id: 3, path: cloudSm, viewBox: '0 0 54 26', className: 'auth-cloud--3' },
  { id: 4, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--4' },
  { id: 5, path: cloudLg, viewBox: '0 0 120 48', className: 'auth-cloud--5' },
  { id: 6, path: cloudSm, viewBox: '0 0 54 26', className: 'auth-cloud--6' },
  { id: 7, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--7' },
] as const

export function SceneDecor() {
  return (
    <div className="hx-scene-deco" aria-hidden>
      <span className="auth-scene-blob auth-scene-blob--sky" />
      <span className="auth-scene-blob auth-scene-blob--sky-alt" />

      {clouds.map((cloud) => (
        <svg key={cloud.id} className={`auth-cloud ${cloud.className}`} viewBox={cloud.viewBox} fill="none">
          <CloudShape path={cloud.path} />
        </svg>
      ))}
      <svg className="auth-leaf auth-leaf--1" viewBox="0 0 32 32" fill="none">
        <path
          d="M16 4C10 10 6 18 8 26c6-2 12-8 14-16-2-2-4-4-6-6Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path d="M16 10v12M13 18h6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </svg>
      <svg className="auth-leaf auth-leaf--2" viewBox="0 0 32 32" fill="none">
        <path
          d="M16 4C10 10 6 18 8 26c6-2 12-8 14-16-2-2-4-4-6-6Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  )
}

/** @deprecated 使用 SceneDecor */
export const AuthSceneDecor = SceneDecor

export function AuthTicketIcon({ className = '' }: { className?: string }) {
  return (
    <span className={`auth-ticket-icon ${className}`.trim()}>
      <svg viewBox="0 0 24 24" fill="none" aria-hidden>
        <path
          d="M5 11.5 12 6l7 5.5V19a1.5 1.5 0 0 1-1.5 1.5H14v-5.5h-4V20.5H6.5A1.5 1.5 0 0 1 5 19v-7.5Z"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinejoin="round"
        />
        <path
          d="M17 4.5c1.2.8 2 2.2 2 3.8 0 2.8-2.2 4.2-4 5.2"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
        <circle cx="18.5" cy="5.5" r="1.25" fill="currentColor" />
      </svg>
    </span>
  )
}