import React, { useId, useEffect } from 'react';
import styled from 'styled-components';

interface CustomSwitchProps {
  id?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
}

const CustomSwitch: React.FC<CustomSwitchProps> = ({ id, checked, onChange }) => {
  const generatedId = useId();
  const inputId = id || generatedId;

  // Add this to debug
  useEffect(() => {
  }, [checked, inputId]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked);
  };

  return (
    <StyledWrapper>
      <label className="switch" htmlFor={inputId}>
        <input
          id={inputId}
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
        <span className="slider" />
      </label>
    </StyledWrapper>
  );
};

const StyledWrapper = styled.div`
  .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 2.05em;
    height: 1.05em;
    cursor: pointer;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ff828e;
    border-radius: 40px;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 0.85em;
    width: 0.85em;
    left: 0.1em;
    bottom: 0.1em;
    background-color: white;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .switch input:checked + .slider {
    background-color: #FB122B;
  }

  .switch input:checked + .slider:before {
    transform: translateX(0.95em);
  }
`;

export default CustomSwitch;