import { useState } from 'react';
import { Button, Heading, Link, OtpInput, Text, VStack } from '@cdx-ui/components';

export function VerifyCard() {
  const [otp, setOtp] = useState('482');
  return (
    <VStack className="gap-4">
      <Heading size="sm" className="text-center">
        Verify it&apos;s you
      </Heading>
      <Text className="body-sm text-content-secondary">
        Please enter the 6-digit code we sent via text message.
      </Text>
      <OtpInput
        accessibilityLabel="Verification code"
        cellCount={6}
        value={otp}
        onChangeText={setOtp}
      />
      <VStack className="items-center gap-8 py-4">
        <Text className="body-sm text-content-secondary">
          Didn&apos;t receive the code?{' '}
          <Link href="#">
            <Link.Label>Resend</Link.Label>
          </Link>
        </Text>
        <Button variant="solid" color="action" fullWidth onPress={() => {}}>
          <Button.Label>Verify</Button.Label>
        </Button>
      </VStack>
    </VStack>
  );
}