import { View, Text, Pressable } from "react-native";
import { useEffect, useMemo, useState } from "react";

export default function OfferCard(props: { offer: any; onAccept: () => void; onDecline: () => void; }) {
  const { offer } = props;
  const expiresAt = useMemo(() => new Date(offer.expiresAt).getTime(), [offer.expiresAt]);
  const [secs, setSecs] = useState(Math.max(0, Math.floor((expiresAt - Date.now()) / 1000)));

  useEffect(() => {
    const t = setInterval(() => setSecs(Math.max(0, Math.floor((expiresAt - Date.now()) / 1000))), 500);
    return () => clearInterval(t);
  }, [expiresAt]);

  return (
    <View style={{ borderWidth: 1, borderRadius: 10, padding: 12, gap: 6 }}>
      <Text style={{ fontWeight: "700" }}>Offer</Text>
      <Text>Request: {offer.bookingRequestId}</Text>
      <Text>Countdown: {secs}s</Text>
      <View style={{ flexDirection: "row", gap: 8 }}>
        <Pressable onPress={props.onAccept} style={{ backgroundColor: "black", padding: 10, borderRadius: 10, flex: 1 }}>
          <Text style={{ color: "white", textAlign: "center" }}>Accept</Text>
        </Pressable>
        <Pressable onPress={props.onDecline} style={{ borderWidth: 1, padding: 10, borderRadius: 10, flex: 1 }}>
          <Text style={{ textAlign: "center" }}>Decline</Text>
        </Pressable>
      </View>
    </View>
  );
}