import { View, Text, Pressable } from "react-native";
import { useMemo, useState } from "react";
import { pula } from "../lib/format";

export default function DepositChooser(props: {
  price: number;
  recommended: number;
  min: number;
  max: number;
  onChange: (n: number) => void;
}) {
  const { price, recommended, min, max, onChange } = props;
  const [amount, setAmount] = useState(recommended);

  const steps = useMemo(() => {
    const half = Math.min(max, Math.max(min, Math.round(price * 0.5)));
    return [
      { label: "Min", value: min },
      { label: "20% (Rec)", value: recommended },
      { label: "50%", value: half },
      { label: "Full", value: max },
    ];
  }, [price, recommended, min, max]);

  function pick(v: number) {
    const clamped = Math.min(max, Math.max(min, v));
    setAmount(clamped);
    onChange(clamped);
  }

  return (
    <View style={{ borderWidth: 1, borderRadius: 10, padding: 12, gap: 8 }}>
      <Text>Min: {pula(min)} | Max: {pula(max)}</Text>
      <Text style={{ fontWeight: "700" }}>Selected: {pula(amount)}</Text>

      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
        {steps.map(s => (
          <Pressable key={s.label} onPress={() => pick(s.value)}
            style={{ borderWidth: 1, borderRadius: 999, paddingVertical: 8, paddingHorizontal: 12 }}>
            <Text>{s.label}</Text>
          </Pressable>
        ))}
      </View>

      <Text style={{ opacity: 0.7 }}>Add a slider later for smoother custom amounts.</Text>
    </View>
  );
}