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

export function RxCartGate({
  rxItemNames,
}: {
  rxItemNames: string[];
}) {
  if (!rxItemNames.length) return null;
  return (
    <Card tone="wash" elevated={false} style={{ borderColor: colors.warn }}>
      <Text variant="h3">Prescription required</Text>
      <Text variant="bodySm" color={colors.muted} style={{ marginTop: 6 }}>
        These items need an approved or submitted Rx before checkout:{" "}
        {rxItemNames.slice(0, 3).join(", ")}
        {rxItemNames.length > 3 ? ` +${rxItemNames.length - 3} more` : ""}.
      </Text>
      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
        <Button
          title="Upload Rx"
          size="md"
          fullWidth={false}
          icon="document-attach-outline"
          onPress={() => router.push(routes.rxScan)}
        />
        <Button
          title="My prescriptions"
          size="md"
          fullWidth={false}
          variant="outline"
          onPress={() => router.push(routes.rxList)}
        />
      </View>
    </Card>
  );
}