import { View, ScrollView } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function PaymentDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Payment #{id ?? '—'}</CardTitle>
        </CardHeader>
        <CardContent className="gap-2">
          <View className="flex-row justify-between py-2">
            <Text className="text-muted-foreground">Amount</Text>
            <Text className="font-semibold text-gray-900">$2,000.00</Text>
          </View>
          <View className="flex-row justify-between py-2">
            <Text className="text-muted-foreground">Source</Text>
            <Text className="text-gray-900">Telebirr</Text>
          </View>
          <View className="flex-row justify-between py-2">
            <Text className="text-muted-foreground">Date</Text>
            <Text className="text-gray-900">Sep 11, 2022</Text>
          </View>
          <View className="flex-row justify-between py-2">
            <Text className="text-muted-foreground">Associated invoice</Text>
            <Text className="text-amber-600">Not linked</Text>
          </View>
        </CardContent>
      </Card>

      <Button className="mb-3 bg-primary" onPress={() => {}}>
        <Text className="text-primary-foreground font-medium">Associate to invoice</Text>
      </Button>
      <Button variant="outline" onPress={() => router.back()}>
        <Text className="font-medium">Back to payments</Text>
      </Button>
    </ScrollView>
  );
}