'use client';

import React, { useState } from 'react';
import DashboardSidebar from "@/components/DashboardSidebar";

interface MobilePageHeaderProps {
  title: string;
  onBack?: () => void;
  rightContent?: React.ReactNode;
  menuItems?: Array<{
    label: string;
    icon?: React.ReactNode;
    onClick: () => void;
  }>;
}

const MobilePageHeader: React.FC<MobilePageHeaderProps> = ({ title, onBack, rightContent, menuItems = [] }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <>
      <div className="sticky top-0 z-50 hidden max-md:flex items-center justify-between px-5 py-4 mb-5 shadow-headerShadow bg-white dark:bg-darkbg -mx-5">
        <button onClick={onBack} className="rtl:rotate-180">
         <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.7895 11.0066H7.61953L12.4995 6.12656C12.8895 5.73656 12.8895 5.09656 12.4995 4.70656C12.1095 4.31656 11.4795 4.31656 11.0895 4.70656L4.49953 11.2966C4.10953 11.6866 4.10953 12.3166 4.49953 12.7066L11.0895 19.2966C11.4795 19.6866 12.1095 19.6866 12.4995 19.2966C12.8895 18.9066 12.8895 18.2766 12.4995 17.8866L7.61953 13.0066H18.7895C19.3395 13.0066 19.7895 12.5566 19.7895 12.0066C19.7895 11.4566 19.3395 11.0066 18.7895 11.0066Z"
            fill="#1E293B"
            className="dark:fill-white"
          />
        </svg>
      </button>
        
        <div className="text-base text-neutrals800 font-semibold dark:text-white">{title}</div>
        
        <div className='flex gap-1 items-center'>
          {rightContent}
            <button 
              onClick={toggleMenu}
              className="p-1 hover:bg-slate-100 dark:hover:bg-slate-800 rounded transition-colors"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3 12H21M3 6H21M3 18H21"
                  stroke="#1E293B"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="dark:stroke-white"
                />
              </svg>
            </button>
        </div>
      </div>

      {/* Overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-[99] transition-opacity duration-300" onClick={toggleMenu} />
      )}

      {/* Slide-in Menu */}
      <div className={`fixed top-0 right-0 h-full w-[70%] bg-white dark:bg-darkbg shadow-xl z-[991] transform transition-transform duration-300 ease-in-out ${
          isMenuOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        <div className="flex flex-col h-full">
          {/* Menu Header */}
          <div className="flex items-center justify-between px-5 py-2.5 pr-1.5 border-b dark:border-slate-700">
            <div></div>
            <button 
              onClick={toggleMenu}
              className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded transition-colors"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 5L5 15M5 5L15 15"
                  stroke="#1E293B"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="dark:stroke-white"
                />
              </svg>
            </button>
          </div>

          {/* Menu Items */}
          <div className="flex-1 overflow-y-auto py-4">
            <DashboardSidebar className="!block !w-full mt-0 border-hidden !top-0" />
          </div>
        </div>
      </div>
    </>
  );
};

export default MobilePageHeader;