Gishen-Mob/components/checkout/LoyaltyRedeemRow.tsx

import { View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";
import { Field } from "@/components/ui/Field";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";
import { formatETB } from "@/lib/utils";

export function LoyaltyRedeemRow({
  points,
  activeVoucher,
  voucher,
  discount,
  onChangeVoucher,
  onApplyDemo,
  onApplyLoyalty,
  onRedeemPoints,
  canRedeem,
}: {
  points: number;
  activeVoucher?: string | null;
  voucher: string;
  discount: number;
  onChangeVoucher: (v: string) => void;
  onApplyDemo: () => void;
  onApplyLoyalty: () => void;
  onRedeemPoints: () => void;
  canRedeem: boolean;
}) {
  return (
    <Card elevated={false}>
      <Text variant="h3" style={{ marginBottom: 10 }}>
        Voucher & points
      </Text>
      <Field
        label="Code"
        value={voucher}
        onChangeText={onChangeVoucher}
        placeholder="GISHEN10"
        icon="pricetag-outline"
        hint={discount ? `Saving ${formatETB(discount)}` : "Try GISHEN10 for 10% off"}
      />
      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
        <Chip
          label="GISHEN10"
          onPress={onApplyDemo}
          selected={voucher.toUpperCase() === "GISHEN10"}
        />
        {activeVoucher ? (
          <Chip
            label={`Loyalty: ${activeVoucher}`}
            onPress={onApplyLoyalty}
            selected={voucher === activeVoucher}
          />
        ) : null}
      </View>
      {!activeVoucher ? (
        <View
          style={{
            marginTop: 14,
            padding: 12,
            borderRadius: 14,
            backgroundColor: colors.brandWash,
            borderWidth: 1,
            borderColor: colors.brandBorder,
            gap: 10,
          }}
        >
          <Text variant="bodySm" color={colors.muted}>
            You have {points} pts. Redeem 100 pts for a GISHEN10 voucher at checkout.
          </Text>
          <Button
            title="Redeem 100 pts"
            size="md"
            variant="soft"
            disabled={!canRedeem}
            onPress={onRedeemPoints}
          />
        </View>
      ) : null}
    </Card>
  );
}