Gishen-Mob/components/profile/LoyaltyStrip.tsx

import { Pressable, View } from "react-native";
import { router } from "expo-router";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import { Text } from "@/components/ui/Text";
import { routes } from "@/lib/routes";
import { colors } from "@/lib/theme";

const NEXT_TIER = {
  bronze: { label: "Silver", at: 300 },
  silver: { label: "Gold", at: 1000 },
  gold: { label: "Gold", at: 1000 },
} as const;

export function LoyaltyStrip({
  points,
  tier,
}: {
  points: number;
  tier: "bronze" | "silver" | "gold";
}) {
  const next = NEXT_TIER[tier];
  const prev = tier === "gold" ? 1000 : tier === "silver" ? 300 : 0;
  const progress =
    tier === "gold" ? 1 : Math.min(1, Math.max(0, (points - prev) / (next.at - prev)));

  return (
    <Pressable onPress={() => router.push(routes.loyalty)}>
      <Card tone="brand" elevated={false} style={{ marginTop: 12 }}>
        <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
          <View>
            <Text variant="caption" color={colors.muted}>
              Loyalty wallet
            </Text>
            <Text variant="h2" style={{ marginTop: 2 }}>
              {points} pts
            </Text>
          </View>
          <Badge label={tier} tone="brand" />
        </View>
        <View
          style={{
            marginTop: 12,
            height: 8,
            borderRadius: 999,
            backgroundColor: colors.surface,
            overflow: "hidden",
          }}
        >
          <View
            style={{
              width: `${Math.round(progress * 100)}%`,
              height: "100%",
              backgroundColor: colors.brand,
            }}
          />
        </View>
        <Text variant="caption" color={colors.muted} style={{ marginTop: 8 }}>
          {tier === "gold"
            ? "You’re at Gold — keep redeeming rewards"
            : `${next.at - points} pts to ${next.label}`}
        </Text>
      </Card>
    </Pressable>
  );
}