import { Checkbox, Heading, HStack, IconButton, Link, Text, VStack } from '@cdx-ui/components';
import { ArrowBack, Close } from '@cdx-ui/icons';

export function MobileDepositTerms() {
  return (
    <VStack className="gap-6">
      <HStack className="justify-between items-center">
        <IconButton as={ArrowBack} />
        <Heading size="sm">Deposit check</Heading>
        <IconButton as={Close} />
      </HStack>
      <Text className="text-base">
        To activate Forge Design Mobile Deposit, review and accept the Forge Design Mobile Deposit
        Terms of Service and Privacy Policy.
      </Text>

      <Text className="text-base">
        Read our{' '}
        <Link href="#">
          <Link.Label className="text-base">Terms of Service</Link.Label>
        </Link>{' '}
        and{' '}
        <Link href="#">
          <Link.Label className="text-base">Privacy Policy</Link.Label>
        </Link>
        .
      </Text>

      <Checkbox value="terms" onChange={() => {}} className="items-start">
        <Checkbox.Label className="text-base">
          I have read and agree to the Forge Design Mobile Deposit Terms and Agreement
        </Checkbox.Label>
      </Checkbox>
    </VStack>
  );
}