import { Check as CheckIcon } from '@tamagui/lucide-icons-2'
import type { CheckboxProps } from 'tamagui'
import { Checkbox, Label, Theme, XStack, YStack } from 'tamagui'

export function CheckboxDemo() {
  return (
    <Theme name="surface2">
      <YStack width={300} items="center" gap="$2">
        <CheckboxWithLabel size="$3" />
        <CheckboxWithLabel size="$4" defaultChecked />
        <CheckboxWithLabel size="$5" disabled label="Accept terms (disabled)" />
      </YStack>
    </Theme>
  )
}

export function CheckboxWithLabel({
  size,
  label = 'Accept terms and conditions',
  disabled,
  ...checkboxProps
}: CheckboxProps & { label?: string }) {
  const id = `checkbox-${(size || '').toString().slice(1)}`
  return (
    <Theme name={disabled ? 'gray' : null}>
      <XStack width={300} items="center" gap="$4">
        <Checkbox id={id} size={size} disabled={disabled} {...checkboxProps}>
          <Checkbox.Indicator>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox>

        <Label size={size} htmlFor={id} opacity={disabled ? 0.5 : 1}>
          {label}
        </Label>
      </XStack>
    </Theme>
  )
}