DrawerAndroid

import * as React from "react";
import { View } from "react-native";
import { Drawer } from "../drawer";
import { Avatar } from "../../avatar/avatar";
import { Button } from "../../button/button";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** DrawerNav — account header plus navigation items with icons. */
export function DrawerNav() {
  const [open, setOpen] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-3">
            <Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=47" }} fallback="AC" alt="Amara Chen" />
            <View className="flex-1 gap-0.5">
              <Text variant="small" className="font-semibold">Lumo Wallet</Text>
              <Text variant="muted">Home · Transactions · Settings</Text>
            </View>
          </View>
          <Button variant="outline" onPress={() => setOpen(true)}>Open Menu</Button>
          <Drawer open={open} onOpenChange={setOpen}>
            <Drawer.Header>
              <View className="flex-row items-center gap-3">
                <Avatar source={{ uri: "https://i.pravatar.cc/150?img=47" }} fallback="AC" alt="Amara Chen" />
                <View className="flex-1">
                  <Drawer.Title>Amara Chen</Drawer.Title>
                  <Text variant="small">amara@lumowallet.com</Text>
                </View>
              </View>
            </Drawer.Header>
            <Drawer.Item label="Home" active icon={<Icon name="home" size="sm" color="primary" />} onPress={() => setOpen(false)} />
            <Drawer.Item label="Transactions" icon={<Icon name="repeat" size="sm" color="mutedForeground" />} onPress={() => setOpen(false)} />
            <Drawer.Item label="Cards & Banks" icon={<Icon name="credit-card" size="sm" color="mutedForeground" />} onPress={() => setOpen(false)} />
            <Drawer.Item label="Settings" icon={<Icon name="settings" size="sm" color="mutedForeground" />} onPress={() => setOpen(false)} />
            <Drawer.Item label="Log out" icon={<Icon name="log-out" size="sm" color="destructive" />} onPress={() => setOpen(false)} />
          </Drawer>
        </Glass>
      </View>
  );
}