import React from 'react';
import Button from './button';

type ToggleProps = {
    option1: string;
    option2: string;
    setOption: (option: string) => void;
    option: string
    icon1: string;
    icon2: string;
};

const Toggle: React.FC<ToggleProps> = ({ option1, option2, setOption, option, icon1, icon2 }) => {

    return (
        <div className="flex items-center justify-center space-x-4 p-1 rounded-full bg-gray-200">
            <Button
                active={option === option1}
                onClick={() => setOption(option1)}
                className={`flex items-center justify-center px-3 py-1 rounded-full transition-all ${option === option1 ? 'bg-blue-500 text-white' : 'text-gray-500'
                    }`}
            >
                <i className={`${icon1 || 'fas fa-toggle-off'}`} />
            </Button>
            <Button
                active={option === option2}
                onClick={() => setOption(option2)}
                className={`flex items-center justify-center px-3 py-1 rounded-full transition-all ${option === option2 ? 'bg-blue-500 text-white' : 'text-gray-500'
                    }`}
            >
                <i className={`${icon2 || 'fas fa-toggle-on'}`} />
            </Button>
        </div>
    );
};

export default React.memo(Toggle);