import {storyStates} from "@/lib/models/Story";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBookOpen, faKeyboard, faMagicWandSparkles, faPalette, faPenNib} from "@fortawesome/free-solid-svg-icons";
import {Dispatch, SetStateAction} from "react";

export interface RadioBoxValue {
    label: string;
    value: number;
}

interface RadioBoxProps {
    selected: number;
    setSelected: Dispatch<SetStateAction<number>>;
    name: string;
}

export default function RadioBox(
    {
        selected,
        setSelected,
        name
    }: RadioBoxProps) {
    return (
        <div className="flex flex-wrap gap-2">
            {storyStates.map((option: RadioBoxValue) => (
                <div key={option.value} className="flex items-center">
                    <input
                        type="radio"
                        id={option.label}
                        name={name}
                        value={option.value}
                        checked={selected === option.value}
                        onChange={() => setSelected(option.value)}
                        className="hidden"
                    />
                    <label
                        htmlFor={option.label}
                        className={`px-3 lg:px-4 py-2 lg:py-2.5 text-xs lg:text-sm font-medium rounded-xl cursor-pointer transition-all duration-200 flex items-center gap-2 ${
                            selected === option.value
                                ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105 border border-primary-dark'
                                : 'bg-secondary/50 text-muted hover:bg-secondary hover:text-text-primary hover:scale-105 border border-secondary/50 hover:border-secondary'
                        }`}
                    >
                        <FontAwesomeIcon
                            icon={
                                [
                                    faPenNib,
                                    faKeyboard,
                                    faPalette,
                                    faBookOpen,
                                    faMagicWandSparkles
                                ][option.value]
                            }
                            className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
                        />
                        {option.label}
                    </label>
                </div>
            ))}
        </div>
    )
}