'use client'
// Removed Next.js Link import for Electron
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBook, faGlobe, faListAlt, faMapMarkedAlt, faPencilAlt, faUser} from "@fortawesome/free-solid-svg-icons";
import {Dispatch, SetStateAction} from "react";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {useTranslations} from "next-intl";

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

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: faPencilAlt
        },
        {
            id: 'guide-line',
            name: 'bookSetting.guideLine',
            icon: faListAlt
        },
        {
            id: 'story',
            name: 'bookSetting.story',
            icon: faBook
        },
        {
            id: 'world',
            name: 'bookSetting.world',
            icon: faGlobe
        },
        {
            id: 'locations',
            name: 'bookSetting.locations',
            icon: faMapMarkedAlt
        },
        {
            id: 'characters',
            name: 'bookSetting.characters',
            icon: faUser
        },
        // {
        //     id: 'objects',
        //     name: t('bookSetting.objects'),
        //     icon: faLocationArrow
        // },
        // {
        //     id: 'goals',
        //     name: t('bookSetting.goals'),
        //     icon: faCogs
        // },
    ]

    return (
        <div className="py-6 px-3">
            <nav className="space-y-1">
                {
                    settings.map((setting: BookSettingOption) => (
                        <button
                            key={setting.id}
                            onClick={(): void => setSelectedSetting(setting.id)}
                            type="button"
                            className={`flex items-center text-base rounded-xl transition-all duration-200 w-full ${
                                selectedSetting === setting.id
                                    ? 'bg-primary/20 text-text-primary border-l-4 border-primary font-semibold shadow-md scale-105'
                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary hover:scale-102'
                            } p-3 mb-1`}>
                            <FontAwesomeIcon icon={setting.icon}
                                             className={`mr-3 ${selectedSetting === setting.id ? 'text-primary w-5 h-5' : 'text-text-secondary w-5 h-5'}`}/>
                            {t(setting.name)}
                        </button>
                    ))
                }
            </nav>
        </div>
    )
}