'use client'
import React, {Dispatch, SetStateAction} from "react";
import {Book, Download, Globe, List, LucideIcon, Map, Pencil, User, Wand2} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';

interface BookSettingOption {
    id: string;
    name: string;
    icon: LucideIcon;
}

export default function BookSettingSidebar(
    {
        selectedSetting,
        setSelectedSetting
    }: {
        selectedSetting: string,
        setSelectedSetting: Dispatch<SetStateAction<string>>
    }) {
    const t = useTranslations();

    const settings: BookSettingOption[] = [
        {id: 'basic-information', name: 'bookSetting.basicInformation', icon: Pencil},
        {id: 'guide-line', name: 'bookSetting.guideLine', icon: List},
        {id: 'story', name: 'bookSetting.story', icon: Book},
        {id: 'world', name: 'bookSetting.world', icon: Globe},
        {id: 'locations', name: 'bookSetting.locations', icon: Map},
        {id: 'characters', name: 'bookSetting.characters', icon: User},
        {id: 'spells', name: 'bookSetting.spells', icon: Wand2},
        {id: 'quillsense', name: 'bookSetting.quillsense', icon: Wand2},
        {id: 'export', name: 'bookSetting.export', icon: Download},
    ];

    return (
        <div className="py-4 px-2">
            <nav className="space-y-0.5">
                {settings.map((setting: BookSettingOption) => {
                    const Icon: LucideIcon = setting.icon;
                    const isActive: boolean = selectedSetting === setting.id;
                    return (
                        <button
                            key={setting.id}
                            onClick={(): void => setSelectedSetting(setting.id)}
                            className={`flex items-center w-full text-sm rounded-lg transition-colors duration-150 px-3 py-2 ${
                                isActive
                                    ? 'bg-secondary text-text-primary font-medium'
                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary'
                            }`}
                        >
                            <Icon
                                className={`mr-2.5 w-4 h-4 flex-shrink-0 ${isActive ? 'text-primary' : 'text-muted'}`}
                                strokeWidth={1.75}
                            />
                            {t(setting.name)}
                        </button>
                    );
                })}
            </nav>
        </div>
    );
}