CollapsibleiOS

import * as React from "react";
import { View } from "react-native";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
import { Text } from "../../text/text";
import { Icon } from "../../icon/icon";
import { Glass } from "../../glass/glass";

/** CollapsibleOrderDetails — two help articles that expand into answers. */
export function CollapsibleOrderDetails() {
  const [open, setOpen] = React.useState(true);
  const [openB, setOpenB] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full rounded-2xl">
          <Collapsible open={open} onOpenChange={setOpen} className="w-full">
            <CollapsibleTrigger className="w-full pr-4">
              <View className="flex-1 flex-row items-center gap-3 px-4 py-3.5">
                <Glass interactive curvature="edge" className="h-9 w-9 items-center justify-center rounded-full">
                  <Icon name="zap" size="sm" color="mutedForeground" />
                </Glass>
                <View className="flex-1 gap-0.5">
                  <Text variant="small" className="font-semibold">How do joint vaults split rent?</Text>
                  <Text variant="muted">New in 4.0 · 2 min read</Text>
                </View>
              </View>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <View className="gap-2 border-t border-border px-4 py-3.5">
                <Text variant="muted">Each member sets a share — fixed amount or a percent of the bill.</Text>
                <Text variant="muted">Lumo pulls that share on the due date and files the receipt under the vault.</Text>
                <Text variant="muted">Skip a month anytime from Vault → Rules.</Text>
              </View>
            </CollapsibleContent>
          </Collapsible>
        </Glass>

        <Glass interactive curvature="edge" className="w-full rounded-2xl">
          <Collapsible open={openB} onOpenChange={setOpenB} className="w-full">
            <CollapsibleTrigger className="w-full pr-4">
              <View className="flex-1 flex-row items-center gap-3 px-4 py-3.5">
                <Glass interactive curvature="edge" className="h-9 w-9 items-center justify-center rounded-full">
                  <Icon name="credit-card" size="sm" color="mutedForeground" />
                </Glass>
                <View className="flex-1 gap-0.5">
                  <Text variant="small" className="font-semibold">Where do EUR↔USD rates come from?</Text>
                  <Text variant="muted">Cards &amp; banks · 1 min read</Text>
                </View>
              </View>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <View className="gap-2 border-t border-border px-4 py-3.5">
                <Text variant="muted">Mid-market rates refresh every 60 seconds while the app is open.</Text>
                <Text variant="muted">Weekend conversions lock Friday's close until markets reopen.</Text>
              </View>
            </CollapsibleContent>
          </Collapsible>
        </Glass>
      </View>
  );
}