import { Switch } from '@heroui/react';
import type { ReactNode } from 'react';

type Props = {
  isSelected: boolean;
  onChange: (value: boolean) => void;
  label?: ReactNode;
  description?: ReactNode;
  isDisabled?: boolean;
  size?: 'sm' | 'md' | 'lg';
  'aria-label'?: string;
};

export function AppSwitch({ isSelected, onChange, label, description, isDisabled, size, ...rest }: Props) {
  return (
    <Switch
      isSelected={isSelected}
      onChange={onChange}
      isDisabled={isDisabled}
      size={size}
      aria-label={!label ? rest['aria-label'] || 'Umschalten' : undefined}
    >
      <Switch.Content>
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        {label && <span>{label}</span>}
      </Switch.Content>
      {description && <p data-slot="description" className="text-xs text-muted">{description}</p>}
    </Switch>
  );
}