'use client';

import { FC } from 'react';
import { cn } from '@/utils/helpers';
import styles from './Toggle.module.scss';

export interface ToggleProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  size?: 'sm' | 'md';
  label?: string;
  className?: string;
}

export const Toggle: FC<ToggleProps> = ({
  checked,
  onChange,
  disabled = false,
  size = 'md',
  label,
  className,
}) => {
  const handleClick = () => {
    if (!disabled) {
      onChange(!checked);
    }
  };

  return (
    <label
      className={cn(
        styles.toggle,
        styles[`toggle--${size}`],
        disabled && styles['toggle--disabled'],
        className
      )}
    >
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        className={cn(styles.toggle__switch, checked && styles['toggle__switch--checked'])}
        onClick={handleClick}
        disabled={disabled}
      >
        <span className={styles.toggle__thumb} />
      </button>
      {label && <span className={styles.toggle__label}>{label}</span>}
    </label>
  );
};
