ERitors-Scribe-Desktop/components/form/RadioBox.tsx

import {storyStates} from "@/lib/constants/story";
import {BookOpen, Keyboard, LucideIcon, Palette, PenLine, Wand2} from "lucide-react";
import React, {Dispatch, SetStateAction} from "react";

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

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

const storyStateIcons: LucideIcon[] = [PenLine, Keyboard, Palette, BookOpen, Wand2];

export default function RadioBox(
    {
        selected,
        setSelected,
        name
    }: RadioBoxProps) {
    return (
        <div className="flex flex-wrap gap-2">
            {storyStates.map((option: RadioBoxValue) => {
                const Icon = storyStateIcons[option.value];
                return (
                    <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-colors duration-150 flex items-center gap-2 ${
                                selected === option.value
                                    ? 'bg-secondary text-primary border border-primary'
                                    : 'bg-secondary text-text-secondary hover:text-text-primary border border-secondary'
                            }`}
                        >
                            <Icon
                                className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
                                strokeWidth={1.75}
                            />
                            {option.label}
                        </label>
                    </div>
                );
            })}
        </div>
    )
}