ERitors-Scribe-Desktop/components/ui/ToggleGroup.tsx

import React from "react";
import {LucideIcon} from "lucide-react";

interface ToggleOption {
    value: string;
    label: string;
}

type ToggleGroupSize = 'sm' | 'md';

interface ToggleGroupProps {
    options: ToggleOption[];
    value: string;
    onChange: (value: string) => void;
    icon?: LucideIcon;
    size?: ToggleGroupSize;
}

const sizeClasses: Record<ToggleGroupSize, { wrapper: string; icon: string; button: string }> = {
    sm: {wrapper: 'rounded-lg', icon: 'w-3.5 h-3.5 mx-2', button: 'px-2.5 py-1 text-xs'},
    md: {wrapper: 'rounded-xl', icon: 'w-4 h-4 mx-2.5', button: 'px-3 py-1.5 text-sm'},
};

export default function ToggleGroup(
    {
        options,
        value,
        onChange,
        icon: Icon,
        size = 'sm'
    }: ToggleGroupProps): React.JSX.Element {
    const config = sizeClasses[size];
    
    return (
        <div className={`flex items-center bg-darkest-background ${config.wrapper} border border-secondary`}>
            {Icon && (
                <Icon className={`${config.icon} text-primary flex-shrink-0`} strokeWidth={1.75}/>
            )}
            {options.map(function (option: ToggleOption): React.JSX.Element {
                const isActive: boolean = value === option.value;
                return (
                    <button
                        key={option.value}
                        onClick={function (): void {
                            onChange(option.value);
                        }}
                        className={`${config.button} font-semibold transition-all duration-200 ${
                            isActive
                                ? 'bg-primary text-text-primary rounded-lg'
                                : 'text-text-secondary hover:text-text-primary'
                        }`}
                    >
                        {option.label}
                    </button>
                );
            })}
        </div>
    );
}