"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { getIndexableServices } from "@/data/services";

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

export default function ServicesDrawer({
  isOpen,
  onClose,
}: ServicesDrawerProps) {
  const indexableServices = getIndexableServices();
  const pathname = usePathname();

  return (
    <>
      {/* Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-50 transition-opacity"
          onClick={onClose}
          aria-hidden="true"
        />
      )}

      {/* Drawer */}
      <aside
        className={`fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 transform transition-transform duration-300 ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
        aria-label="Menu de serviços">
        {/* Header */}
        <div className="bg-primary text-white p-4 flex items-center justify-between">
          <h2 className="text-xl font-bold !text-white">Todos os Serviços</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/10 rounded-lg transition-colors"
            aria-label="Fechar 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>

        {/* Services List */}
        <nav className="overflow-y-auto h-[calc(100%-64px)] p-4">
          <ul className="space-y-1">
            {indexableServices.map((service) => {
              const isActive = pathname === `/${service.slug}`;
              return (
                <li key={service.slug}>
                  <Link
                    href={`/${service.slug}`}
                    onClick={onClose}
                    className={`block px-4 py-2 text-sm rounded-lg transition-colors ${
                      isActive
                        ? "bg-primary text-white font-semibold"
                        : "text-gray-700 hover:bg-secondary hover:text-white"
                    }`}>
                    {service.title}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </aside>
    </>
  );
}