import { useEffect, useState } from 'react'
import { isPetalsEnabled, onPetalsEnabledChange, setPetalsEnabled } from '../../effects/petals'

// A tiny toggle for Petal's ambient falling-blossom layer, sitting just left of
// the sound toggle in the status bar. Some people find the drifting petals
// distracting, so this turns them off entirely. Bilingual tooltip (she reads
// Mandarin first), and the choice persists across reloads.
export function PetalsToggle() {
  const [on, setOn] = useState(isPetalsEnabled)

  // Stay in sync if the setting is flipped elsewhere.
  useEffect(() => onPetalsEnabledChange(setOn), [])

  const toggle = () => {
    const next = !on
    setPetalsEnabled(next)
    setOn(next)
  }

  return (
    <button
      type="button"
      onClick={toggle}
      aria-pressed={on}
      title={on ? '花瓣开 · Petals on' : '花瓣关 · Petals off'}
      aria-label={on ? 'Hide falling petals' : 'Show falling petals'}
      className="flex items-center justify-center rounded-full px-2 py-1 text-xl leading-none transition-colors"
      style={{ color: on ? 'var(--color-accent)' : 'var(--color-muted)', lineHeight: 1 }}
      onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-accent-hover)')}
      onMouseLeave={(e) =>
        (e.currentTarget.style.color = on ? 'var(--color-accent)' : 'var(--color-muted)')
      }
    >
      <span aria-hidden>{on ? '🌸' : '🍃'}</span>
    </button>
  )
}
