'use client';

import { classNames } from '@/lib/components/classNames';
import type { InputHTMLAttributes, ReactNode } from 'react';
import styles from './ChoiceControls.module.css';

interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label: ReactNode;
  description?: ReactNode;
  invalid?: boolean;
}

function Choice({
  label,
  description,
  invalid = false,
  className,
  type,
  ...props
}: ChoiceProps & { type: 'checkbox' | 'radio' }) {
  return (
    <label className={classNames(styles.choice, invalid && styles.invalid, className)}>
      <input type={type} aria-invalid={invalid || undefined} {...props} />
      <span className={styles.content}>
        <span className={styles.label}>{label}</span>
        {description ? <span className={styles.description}>{description}</span> : null}
      </span>
    </label>
  );
}

export function Checkbox(props: ChoiceProps) {
  return <Choice type="checkbox" {...props} />;
}

export function Radio(props: ChoiceProps) {
  return <Choice type="radio" {...props} />;
}

interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
  label: ReactNode;
  description?: ReactNode;
}

export function Switch({ label, description, className, ...props }: SwitchProps) {
  return (
    <label className={classNames(styles.choice, className)}>
      <input type="checkbox" role="switch" className={styles.switchInput} {...props} />
      <span aria-hidden="true" className={styles.switchTrack}>
        <span />
      </span>
      <span className={styles.content}>
        <span className={styles.label}>{label}</span>
        {description ? <span className={styles.description}>{description}</span> : null}
      </span>
    </label>
  );
}