import React, { useState } from "react";
import {
  SwitchContainer,
  SwitchInput,
  SwitchLabel,
  SwitchSlider,
} from "./styles";

const Switch = ({ defaultChecked, color, icon, onChange }) => {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = (e) => {
    setChecked(e.target.checked);
    onChange && onChange(e);
  };

  return (
    <SwitchContainer>
      <SwitchLabel>
        <SwitchInput
          type="checkbox"
          checked={checked}
          color={color}
          onChange={handleChange}
        />
        <SwitchSlider color={color}>
          <div className="icon">{icon}</div>
        </SwitchSlider>
      </SwitchLabel>
    </SwitchContainer>
  );
};

export default Switch;
