import clsx from 'clsx';

import Switch from '@/components/switch/Switch';

type Props = {
  label?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  thumbClassName?: string;
  containerClassName?: string;
};

export const CreateV2Switch = ({
  label,
  checked,
  onChange,
  thumbClassName,
  containerClassName,
}: Props) => {
  return (
    <Switch
      label={label}
      labelClassName={
        checked ? 'text-foreground-primary' : 'text-foreground-primary/50'
      }
      thumbClassName={clsx(
        'w-[28px] h-[28px] border-0 left-[2px] top-[2px] bg-background-primary',
        thumbClassName
      )}
      containerClassName={clsx(
        'h-8 w-12 border-0 ring-0 bg-foreground-primary/10',
        {
          'bg-foreground-primary/90': checked,
        },
        containerClassName
      )}
      checked={checked}
      onChange={onChange}
    />
  );
};