import { View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'

import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Radio, RadioGroup } from '@/components/ui/radio'
import { Switch } from '@/components/ui/switch'
import Text from '@/components/ui/text'

const Home = () => {
  return (
    <SafeAreaView className="px-xl">
      <View className="mb-xl gap-xs">
        <Button leadingIcon="Heart" iconOnly />
        <Button leadingIcon="ArrowLeft" trailingIcon="ArrowRight" className="justify-between">
          Click me
        </Button>
        <Button variant="destructive" leadingIcon="ArrowLeft" trailingIcon="ArrowRight">
          Click me
        </Button>
      </View>
      <Checkbox value="test" className="mb-xl" label={<Text>Testtt2</Text>} />
      <Checkbox value="test2" className="mb-xl" label="Test3" isInvalid />
      <RadioGroup className="mb-xl">
        <Radio value="test2" label={<Text>Testtt2</Text>} />
        <Radio value="test3" label="Test3" isInvalid />
      </RadioGroup>
      <Switch size="lg" className="mb-xl" isDisabled isChecked />
      <Text variant="h1">Variant H1</Text>
      <Text variant="h2">Variant H2</Text>
      <Text variant="h3">Variant H3</Text>
      <Text variant="h4">Variant H4</Text>
      <Text variant="p">Variant P</Text>
      <Text variant="blockquote">Variant Blockquote</Text>
      <Text variant="tableHeader">Variant Table Header</Text>
      <Text variant="table">Variant Table</Text>
      <Text variant="list">Variant List</Text>
      <Text variant="inlineCode">Variant Inline Code</Text>
      <Text variant="lead">Variant Lead</Text>
      <Text variant="large">Variant Large</Text>
      <Text variant="medium">Variant Medium</Text>
      <Text variant="small">Variant Small</Text>
      <Text variant="muted">Variant Muted</Text>
    </SafeAreaView>
  )
}

export default Home