import styled from '@emotion/styled';
import React, { useState } from 'react';

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

const ToggleWrapper = styled.label`
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
`;

const ToggleTrack = styled.div<{ checked: boolean }>`
  width: 44px;
  height: 24px;
  background: ${(props) => (props.checked ? ' #baddc0' : '#D1D5DB')};
  border-radius: 12px;
  padding: 2px;
  transition: all 0.2s ease-in-out;
  position: relative;
`;

const ToggleThumb = styled.div<{ checked: boolean }>`
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transform: translateX(${(props) => (props.checked ? '20px' : '0')});
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
`;

const HiddenInput = styled.input`
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
`;

const ToggleButton: React.FC<ToggleButtonProps> = ({
  checked = false,
  onChange,
  label,
}) => {
  const [isChecked, setIsChecked] = useState(checked);

  const handleChange = () => {
    const newChecked = !isChecked;
    setIsChecked(newChecked);
    onChange?.(newChecked);
  };

  return (
    <ToggleWrapper>
      <HiddenInput
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      <ToggleTrack checked={isChecked}>
        <ToggleThumb checked={isChecked} />
      </ToggleTrack>
      {label && <span>{label}</span>}
    </ToggleWrapper>
  );
};

export default ToggleButton;