Gishen-Mob/components/care/FamilyInviteCard.tsx

import { Ionicons } from "@expo/vector-icons";
import { Share, View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";

export function FamilyInviteCard({
  inviteCode,
  onInvite,
}: {
  inviteCode: string;
  onInvite: () => void;
}) {
  return (
    <Card tone="brand" elevated={false}>
      <View style={{ flexDirection: "row", gap: 12, alignItems: "center" }}>
        <View
          style={{
            width: 48,
            height: 48,
            borderRadius: 14,
            backgroundColor: colors.surface,
            alignItems: "center",
            justifyContent: "center",
            borderWidth: 1,
            borderColor: colors.brandBorder,
          }}
        >
          <Ionicons name="people" size={22} color={colors.brandText} />
        </View>
        <View style={{ flex: 1 }}>
          <Text variant="caption" color={colors.muted}>
            Family invite code
          </Text>
          <Text variant="h2" style={{ marginTop: 2, letterSpacing: 1 }}>
            {inviteCode}
          </Text>
        </View>
      </View>
      <Text variant="bodySm" color={colors.muted} style={{ marginTop: 10 }}>
        Share care so family can help with dose reminders and refills.
      </Text>
      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
        <Button
          title="Share code"
          size="md"
          fullWidth={false}
          variant="outline"
          icon="share-outline"
          onPress={() =>
            Share.share({
              message: `Join my Gishen family care group with code ${inviteCode}`,
            })
          }
        />
        <Button
          title="Invite family"
          size="md"
          fullWidth={false}
          icon="person-add-outline"
          onPress={onInvite}
        />
      </View>
    </Card>
  );
}