import { useState } from 'react';
import { Card, Checkbox, Field, Heading, Radio, VStack } from '@cdx-ui/components';

export function AlertsCard() {
  const [alerts, setAlerts] = useState<string[]>(['deposits']);
  const [delivery, setDelivery] = useState('paperless');
  return (
    <Card>
      <Card.Header>
        <Heading size="sm">Alerts & statements</Heading>
      </Card.Header>
      <Card.Content>
        <VStack className="gap-4">
          <Field>
            <Field.Label>Alerts</Field.Label>
            <Checkbox.Group value={alerts} onChange={setAlerts} direction="column">
              <Checkbox value="deposits">
                <Checkbox.Label>Deposits</Checkbox.Label>
              </Checkbox>
              <Checkbox value="lowbalance">
                <Checkbox.Label>Low balance</Checkbox.Label>
              </Checkbox>
              <Checkbox value="largepurchase">
                <Checkbox.Label>Large purchases</Checkbox.Label>
              </Checkbox>
            </Checkbox.Group>
          </Field>
          <Field>
            <Field.Label>Statement delivery</Field.Label>
            <Radio.Group
              value={delivery}
              onChange={setDelivery}
              direction="column"
              aria-label="Statement delivery"
            >
              <Radio value="paperless">
                <Radio.Label>Paperless</Radio.Label>
              </Radio>
              <Radio value="mail">
                <Radio.Label>Mail</Radio.Label>
              </Radio>
            </Radio.Group>
          </Field>
        </VStack>
      </Card.Content>
    </Card>
  );
}