import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Pressable, ScrollView, View } from "react-native";
import { Text } from "@/components/ui/Text";
import { routes } from "@/lib/routes";
import { colors, radii } from "@/lib/theme";

const ACTIONS: {
  label: string;
  icon: keyof typeof Ionicons.glyphMap;
  href: string;
}[] = [
  { label: "Orders", icon: "receipt-outline", href: routes.orders },
  { label: "Upload Rx", icon: "document-attach-outline", href: routes.rxScan },
  { label: "Addresses", icon: "home-outline", href: routes.addresses },
  { label: "Rewards", icon: "star-outline", href: routes.loyalty },
];

export function QuickActions() {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ gap: 8, paddingVertical: 2 }}
      style={{ marginTop: 14 }}
    >
      {ACTIONS.map((a) => (
        <Pressable
          key={a.label}
          onPress={() => router.push(a.href as never)}
          style={{
            minWidth: 86,
            paddingVertical: 12,
            paddingHorizontal: 12,
            borderRadius: radii.md,
            backgroundColor: colors.surface,
            borderWidth: 1,
            borderColor: colors.line,
            alignItems: "center",
            gap: 6,
          }}
        >
          <View
            style={{
              width: 36,
              height: 36,
              borderRadius: 12,
              backgroundColor: colors.brandSoft,
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Ionicons name={a.icon} size={18} color={colors.brandText} />
          </View>
          <Text variant="micro">{a.label}</Text>
        </Pressable>
      ))}
    </ScrollView>
  );
}