import { useState } from 'react'

export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
  const [toggle, setToggle] = useState(false)

  return (
    <>
      {/* Backdrop with fade animation */}
      <div
        className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${toggle
          ? 'bg-black/50 opacity-100 pointer-events-auto'
          : 'bg-black/0 opacity-0 pointer-events-none'
          }`}
        onClick={() => setToggle(false)}
      />

      {/* Main drawer */}
      <div className={`
        fixed bottom-0 left-1/2 -translate-x-1/2 z-20 
        w-[min(80dvw,400px)] bg-zinc-800 
        rounded-t-3xl shadow-2xl border-t border-zinc-600
        transition-all duration-500 ease-out
        ${toggle ? 'h-90' : 'h-16'}
      `}>

        {/* Drawer handle/button */}
        <div className="relative">

          <button
            onClick={() => setToggle(!toggle)}
            className="w-full py-3 px-6 text-white font-medium text-lg
                     transition-colors duration-200
                     flex items-center justify-center gap-2"
          >
            <span>選擇功能</span>
            <span className={`transition-transform duration-300 ${toggle ? 'rotate-180' : ''}`}>
              ▲
            </span>
          </button>
        </div>

        {/* Menu content with staggered animations */}
        <div className={`
          px-6 pb-6 overflow-hidden
          transition-all duration-500 ease-out h-fit
        `}>
          <div className="grid gap-4 pt-4">
            {[
              { key: 'post', label: 'PO文', icon: '✏️', delay: '100ms' },
              { key: 'delete', label: '刪文', icon: '🗑️', delay: '200ms' },
              { key: 'view', label: '查看', icon: '👁️', delay: '300ms' },
            ].map(({ key, label, icon, delay }) => (
              <button
                key={key}
                onClick={() => { setZone(key); setToggle(false) }}
                className="
                  w-full py-4 px-6 bg-zinc-700 hover:bg-zinc-600 
                  rounded-xl text-white text-lg font-medium
                  flex items-center gap-4
                  transform transition-all duration-300 ease-out
                  hover:scale-105 hover:shadow-lg
                  active:scale-95
                "
                style={{
                  transitionDelay: toggle ? delay : '0ms'
                }}
              >
                <span className="text-2xl">{icon}</span>
                <span>{label}</span>
              </button>
            ))}
            <p className='text-slate-500 hover:text-gray-300 active:text-gray-200 w-fit mx-auto'>隱私政策：我們會搜集IP</p>
          </div>
        </div>
      </div>
    </>
  )
}