import { YStack, XStack, Button, View, Paragraph } from '@my/ui'
import { ArrowLeft } from '@tamagui/lucide-icons'
import { JunwonLogoIcon } from 'app/assets/icon'
import { useRouter } from 'solito/router'

export const CameraScreen = () => {
  const router = useRouter()

  return (
    <View
      f={1}
      ai="center"
    >
      <YStack
        maxWidth={500}
        width="100%"
      >
        <XStack
          width="100%"
          ai="center"
          jc="space-between"
          position="relative"
          p="$7"
        >
          <Button
            icon={ArrowLeft}
            size="$6"
            p="$5"
            style={{ position: 'absolute', left: 0 }}
            chromeless
            pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
            onPress={() => router.back()}
          />
          <View style={{ flex: 1, alignItems: 'center' }}>
            <JunwonLogoIcon />
          </View>
        </XStack>

        <YStack gap="$2">
          <Paragraph ta="center">Junwon Camera is not supported on the web.</Paragraph>
          <Paragraph ta="center">You can use the mobile app to access Junwon Camera.</Paragraph>
        </YStack>
      </YStack>
    </View>
  )
}