import { useState } from 'react';
import { Avatar, Text, Tile, VStack } from '@cdx-ui/components';
import { AccountBalance, Savings } from '@cdx-ui/icons';
import { SECTION_LABEL } from './data';

export function TransferToSection() {
  const [selected, setSelected] = useState('checking');
  return (
    <VStack className="gap-2">
      <Text className={SECTION_LABEL}>Transfer to</Text>
      <Tile.Group
        type="single"
        shape="card"
        value={selected}
        onValueChange={setSelected}
        aria-label="Destination account"
      >
        <Tile value="checking">
          <Tile.LeadingSlot>
            <Avatar size="md">
              <Avatar.Icon as={AccountBalance} />
            </Avatar>
          </Tile.LeadingSlot>
          <Tile.Content>
            <Tile.Title>Family Checking</Tile.Title>
            <Tile.Description>···· 4642 · $2,814.66</Tile.Description>
          </Tile.Content>
          <Tile.Indicator />
        </Tile>
        <Tile value="savings">
          <Tile.LeadingSlot>
            <Avatar size="md">
              <Avatar.Icon as={Savings} />
            </Avatar>
          </Tile.LeadingSlot>
          <Tile.Content>
            <Tile.Title>Family Savings</Tile.Title>
            <Tile.Description>···· 5541 · $3,400.22</Tile.Description>
          </Tile.Content>
          <Tile.Indicator />
        </Tile>
      </Tile.Group>
    </VStack>
  );
}