import React from "react";
import "./DuplexToggle.css";

interface DuplexToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    label?: string;
}

const DuplexToggle: React.FC<DuplexToggleProps> = ({
    checked,
    onChange,
    label = "",
}) => {
    const handleClick = () => {
        onChange(!checked);
    };

    return (
        <div className="duplex-toggle" onClick={handleClick}>
            <div className={`duplex-toggle-icon ${checked ? "checked" : "unchecked"}`}>
                {checked ? "双" : "单"}
            </div>
            <span className="duplex-toggle-label">{label}</span>
        </div>
    );
};

export default DuplexToggle;

