import { Chip, Heading, Text, VStack } from '@cdx-ui/components';
import { BeachAccess, CurrencyExchange, FinanceMode, Rainy, Travel } from '@cdx-ui/icons';

export function SavingsGoalPrompt() {
  return (
    <VStack className="gap-2">
      <Heading size="md">Let&apos;s start with what matters to you.</Heading>
      <Text size="md" className="text-content-secondary mb-2">
        You mentioned that you want to grow your savings. What are you saving for?
      </Text>
      <Chip variant="subtle" color="action" onPress={() => {}}>
        <Chip.Icon as={BeachAccess} />
        <Chip.Label>Building my retirement fund</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="action" onPress={() => {}}>
        <Chip.Icon as={Rainy} />
        <Chip.Label>Emergency savings</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="action" onPress={() => {}}>
        <Chip.Icon as={CurrencyExchange} />
        <Chip.Label>Reinvesting in my business</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="action" onPress={() => {}}>
        <Chip.Icon as={Travel} />
        <Chip.Label>Travel or experiences</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="action" onPress={() => {}}>
        <Chip.Icon as={FinanceMode} />
        <Chip.Label>Long-term wealth building</Chip.Label>
      </Chip>
    </VStack>
  );
}