interface ToggleComponentProps<T> {
  optionName: string;
  value: T;
  leftLabel: {
    value: T;
    label?: string;
  };
  rightLabel: {
    value: T;
    label?: string;
  };
  backgroundColor: string;
  disabled?: boolean;
  setValue: (value: T) => void;
}

const ToggleComponentKH = <T,>({
  optionName,
  value,
  leftLabel,
  rightLabel,
  backgroundColor,
  disabled,
  setValue,
}: ToggleComponentProps<T>) => {
  return (
    <div className="flex w-full items-center justify-between text-xs">
      <span>{optionName}</span>
      <div className="inline-flex w-1/2 rounded-md shadow-sm">
        <button
          type="button"
          className={`${value === leftLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-l-lg border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
          onClick={() => setValue(leftLabel.value)}
          disabled={disabled}
        >
          {leftLabel.label || 'Enabled'}
        </button>
        <button
          type="button"
          className={`${value === rightLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-r-md border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
          onClick={() => setValue(rightLabel.value)}
          disabled={disabled}
        >
          {rightLabel.label || 'Disabled'}
        </button>
      </div>
    </div>
  );
};

export default ToggleComponentKH;