'use client';

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 40, fontFamily: 'Helvetica' },
  header: { fontSize: 24, marginBottom: 20, textAlign: 'center', fontWeight: 'bold' },
  section: { margin: 10, padding: 10, fontSize: 12, lineHeight: 1.5 },
  label: { fontWeight: 'bold', marginRight: 10 },
  footer: { marginTop: 40, fontSize: 10, textAlign: 'center', color: 'gray' }
});

export const ContractPDF = ({ property, client, price, contractType }: any) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <Text style={styles.header}>REAL ESTATE {contractType.toUpperCase()} AGREEMENT</Text>
      
      <View style={styles.section}>
        <Text>This agreement is made on {new Date().toLocaleDateString()}</Text>
        <Text style={{ marginTop: 10 }}>Between the Agent representing the Landlord/Seller and the Client:</Text>
        <Text style={{ marginTop: 5 }}><Text style={styles.label}>Client Name:</Text> {client?.name || "John Doe"}</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.label}>Property Details:</Text>
        <Text>{property?.title || "Property Name"}</Text>
        <Text>Location: {property?.locationGps || "Unknown"}</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.label}>Financial Terms:</Text>
        <Text>The agreed amount is {price} BHD.</Text>
      </View>

      <View style={styles.section}>
        <Text>
          By signing this document, the Client agrees to the terms and conditions outlined
          in the standard real estate agreement protocols of the Kingdom of Bahrain.
        </Text>
      </View>

      <View style={{ marginTop: 50, flexDirection: 'row', justifyContent: 'space-between' }}>
        <View>
          <Text>______________________</Text>
          <Text style={{ marginTop: 5 }}>Agent Signature</Text>
        </View>
        <View>
          <Text>______________________</Text>
          <Text style={{ marginTop: 5 }}>Client Signature</Text>
        </View>
      </View>

      <Text style={styles.footer}>Generated by the Ultimate Real Estate Ecosystem</Text>
    </Page>
  </Document>
);