// * Packages
import { SettingsIcon } from "lucide-react";
import { usePage } from "@inertiajs/react";
// * Components shadcn
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
// * Other
import SettingRegistry from "@/back/Components/Layout/Settings/SettingRegistry";
import { cn, GetTranslation } from "@/lib/utils";
import { AppEnv } from "@/types/global";

type AppSettingsProps = {
  className?: string;
};

export default function AppSettings({ className = "" }: AppSettingsProps) {
  const appEnv = usePage().props.appEnv as AppEnv;
  return (
    <div className={cn(className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button className="text-muted-foreground" variant="ghost">
            <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
            <span className="hidden lg:block">
              {GetTranslation("uwil-backend::back.settings")}
            </span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent side="bottom" className="w-fit me-1">
          {SettingRegistry.getAll(appEnv).map((Section, index, arr) => (
            <>
              {Section}
              {Section && index < arr.length - 1 && <DropdownMenuSeparator />}
            </>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}