"use client";

import { Settings, Landmark, DollarSign, Settings2, DoorClosedLocked, CalendarClock, LayoutGrid } from "lucide-react";
import { combineClasses, getMenuItemClasses, getPrimaryTextClass, getPrimaryBorderClass, getPrimaryBgClass } from "@/utils/layout-utils";

interface SettingsMenuButtonProps {
className?: string;
isOpen: boolean;
onToggle: () => void;
onClose: () => void;
onOpenCommonSettings: () => void;
}

type SettingsMenuItem = {
href: string;
label: string;
icon: React.ComponentType<{ size?: number; className?: string }>;
isModal?: boolean;
};

const SETTINGS_MENU_ITEMS: SettingsMenuItem[] = [
{
href: "/settings/banks",
label: "Bank Setting",
icon: Landmark,
},
{
href: "/settings/dashboard",
label: "Dashboard Settings",
icon: DollarSign,
},
{
href: "/settings/common",
label: "Common Settings",
icon: Settings2,
isModal: true,
},
{
href: "/settings/assets",
label: "Asset Definition",
icon: DoorClosedLocked,
},
{
href: "/settings/calendar",
label: "Calendar Settings",
icon: CalendarClock,
},
];

export function SettingsMenuButton({
className,
isOpen,
onToggle,
onClose,
onOpenCommonSettings,
}: SettingsMenuButtonProps) {
return (
<div
data-header-settings
className={combineClasses("relative", className)}
>
<button
onClick={(e) => {
e.stopPropagation();
onToggle();
}}
className={combineClasses(
"inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:-translate-y-0.5",
getPrimaryBorderClass(30),
getPrimaryTextClass(),
getPrimaryBgClass(10)
)}
aria-label="Settings"
>
<Settings size={20} />
</button>

{isOpen && (
<div className="absolute right-0 mt-2 w-56 rounded-lg border border-slate-200 bg-white/95 p-2 shadow-lg backdrop-blur">
{SETTINGS_MENU_ITEMS.map((item) => {
const { href, label, icon: Icon, isModal } = item;
if (isModal) {
return (
<button
key={label}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onClose();
onOpenCommonSettings();
}}
className={combineClasses(getMenuItemClasses(), "w-full text-left text-xs")}
>
<Icon size={16} className={getPrimaryTextClass()} />
{label}
</button>
);
}
return (
<a
key={label}
href={href}
className={combineClasses(getMenuItemClasses(), "text-xs")}
>
<Icon size={16} className={getPrimaryTextClass()} />
{label}
</a>
);
})}
</div>
)}
</div>
);
}