import { useI18n } from "@/lib/i18n";
import type { LucideIcon } from "lucide-react";
import { Monitor, Moon, Sun } from "lucide-react";
import type { HTMLAttributes } from "react";
import type { Appearance } from "@/hooks/use-appearance";
import { useAppearance } from "@/hooks/use-appearance";
import { cn } from "@/lib/utils";

export default function AppearanceToggleTab({
    className = "",
    ...props
}: HTMLAttributes<HTMLDivElement>) {
    const { appearance, updateAppearance } = useAppearance();
    const { t } = useI18n();

    const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
        { value: "light", icon: Sun, label: t("Light", "Light") },
        { value: "dark", icon: Moon, label: t("Dark", "Dark") },
        { value: "system", icon: Monitor, label: t("System", "System") },
    ];

    return (
        <div
            className={cn(
                "inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800",
                className,
            )}
            {...props}
        >
            {tabs.map(({ value, icon: Icon, label }) => (
                <button
                    key={value}
                    onClick={() => updateAppearance(value)}
                    className={cn(
                        "flex items-center rounded-md px-3.5 py-1.5 transition-colors",
                        appearance === value
                            ? "bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100"
                            : "text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60",
                    )}
                >
                    <Icon className="-ml-1 h-4 w-4" />
                    <span className="ml-1.5 text-sm">{label}</span>
                </button>
            ))}
        </div>
    );
}