/**
 * Material Design Switch компонент
 */

'use client';

import React from 'react';

interface SwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  label?: string;
  size?: 'default' | 'compact';
}

const SIZES = {
  default: { trackW: 52, trackH: 32, thumb: 24, inset: 4 },
  compact: { trackW: 40, trackH: 22, thumb: 18, inset: 2 },
};

export const Switch: React.FC<SwitchProps> = ({
  checked,
  onChange,
  disabled = false,
  label,
  size = 'default',
}) => {
  const s = SIZES[size];
  const handleClick = () => {
    if (!disabled) {
      onChange(!checked);
    }
  };

  return (
    <div
      onClick={handleClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.6 : 1,
      }}
    >
      {/* Switch track и thumb */}
      <div
        style={{
          position: 'relative',
          width: s.trackW,
          height: s.trackH,
          borderRadius: s.trackH / 2,
          background: checked
            ? 'var(--md-sys-color-primary)'
            : 'var(--md-sys-color-surface-variant)',
          border: checked
            ? 'none'
            : '2px solid var(--md-sys-color-outline)',
          transition: 'all 0.2s ease',
          flexShrink: 0,
        }}
      >
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: checked ? `calc(100% - ${s.thumb + s.inset}px)` : `${s.inset}px`,
            width: s.thumb,
            height: s.thumb,
            borderRadius: '50%',
            background: checked
              ? 'var(--md-sys-color-on-primary)'
              : 'var(--md-sys-color-outline)',
            transform: 'translateY(-50%)',
            transition: 'all 0.2s ease',
            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
          }}
        />
      </div>

      {/* Label */}
      {label && (
        <span
          style={{
            fontSize: '14px',
            color: 'var(--md-sys-color-on-surface)',
            userSelect: 'none',
          }}
        >
          {label}
        </span>
      )}
    </div>
  );
};