"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

interface MobileDrawerProps {
  isOpen: boolean;
  onClose: () => void;
}

export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
  const [visible, setVisible] = useState(false);
  const [animating, setAnimating] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setVisible(true);
      // Trigger animation on next frame
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setAnimating(true);
        });
      });
    } else {
      setAnimating(false);
      const timer = setTimeout(() => setVisible(false), 200);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  if (!visible) return null;

  return (
    <div className="fixed inset-0 z-50 lg:hidden">
      {/* Overlay */}
      <div
        className={`fixed inset-0 bg-black/50 transition-opacity duration-200 ease-out ${
          animating ? "opacity-100" : "opacity-0"
        }`}
        onClick={onClose}
      />

      {/* Drawer */}
      <div
        className={`fixed left-0 top-0 bottom-0 w-72 bg-surface p-4 overflow-y-auto scroll-touch transition-transform duration-200 ease-out ${
          animating ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex justify-between items-center mb-6">
          <span className="text-primary font-bold text-lg">AdultWorld</span>
          <button onClick={onClose} className="text-text-muted hover:text-white" aria-label="Close menu">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <nav className="space-y-2">
          <Link href="/escorts" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Escorts</Link>
          <Link href="/livecam" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">LiveCam</Link>
          <Link href="/galleries" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Galleries</Link>
          <Link href="/videos" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Videos</Link>
          <Link href="/photos" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Photos</Link>
          <Link href="/blog" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Blog</Link>
          <Link href="/erotica" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Erotica</Link>
          <Link href="/reviews" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Reviews</Link>
          <Link href="/search" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Search</Link>
          <Link href="/escorts-cities" onClick={onClose} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">All Countries</Link>
        </nav>
      </div>
    </div>
  );
}