import { Card, ListItem } from '@cdx-ui/components';
import { ChevronRight, Notifications, Person } from '@cdx-ui/icons';

export function SettingsCard() {
  return (
    <Card>
      <Card.Content className="gap-0 p-0">
        <ListItem onPress={() => {}}>
          <ListItem.LeadingSlot>
            <Person size={24} />
          </ListItem.LeadingSlot>
          <ListItem.Content>
            <ListItem.Title>Account Settings</ListItem.Title>
            <ListItem.Description>Manage your preferences</ListItem.Description>
          </ListItem.Content>
          <ListItem.TrailingSlot>
            <ChevronRight size={20} />
          </ListItem.TrailingSlot>
        </ListItem>
        <ListItem onPress={() => {}} showSeparator={false}>
          <ListItem.LeadingSlot>
            <Notifications size={24} />
          </ListItem.LeadingSlot>
          <ListItem.Content>
            <ListItem.Title>Notifications</ListItem.Title>
            <ListItem.Description>Push, email, and SMS alerts</ListItem.Description>
          </ListItem.Content>
          <ListItem.TrailingSlot>
            <ChevronRight size={20} />
          </ListItem.TrailingSlot>
        </ListItem>
      </Card.Content>
    </Card>
  );
}