import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import {
  Switch as RSwitch,
  Checkbox as RCheckbox,
  RadioGroup as RRadioGroup,
} from 'radix-ui';

export const Switch = (props: ComponentPropsWithoutRef<typeof RSwitch.Root>) => (
  <RSwitch.Root className="mta-switch" {...props}>
    <RSwitch.Thumb className="mta-switch__thumb" />
  </RSwitch.Root>
);

export const Checkbox = (props: ComponentPropsWithoutRef<typeof RCheckbox.Root>) => (
  <RCheckbox.Root className="mta-check" {...props}>
    <RCheckbox.Indicator className="mta-check__indicator">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="var(--lime-ink)"
        strokeWidth={3.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M4 12l5 5L20 6" />
      </svg>
    </RCheckbox.Indicator>
  </RCheckbox.Root>
);

export const RadioGroup = RRadioGroup.Root;

export const RadioItem = ({
  value,
  ...props
}: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
  <RRadioGroup.Item className="mta-radio" value={value} {...props}>
    <RRadioGroup.Indicator className="mta-radio__indicator" />
  </RRadioGroup.Item>
);

export const Control = ({
  children,
  control,
}: {
  children: ReactNode;
  control: ReactNode;
}) => (
  <label className="mta-control">
    {control}
    {children}
  </label>
);
