get the time aswell. and it should be exported as a string
// components/LegalText.js

import React, { useState } from 'react';
import {
  ScrollView,
  Text,
  StyleSheet,
  View,
  TextInput,
} from 'react-native';
import Checkbox from 'expo-checkbox';

const LegalText = () => {
  // State for checkboxes
  const [checkboxes, setCheckboxes] = useState({
    item1: false,
    item2: false,
    item3: false,
  });

  // State for signatures
  const [person1Signature, setPerson1Signature] = useState('');
  const [person2Signature, setPerson2Signature] = useState('');

  // Get today's date
  const today = new Date();
  const formattedDate = today.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  // Handler to toggle checkboxes
  const toggleCheckbox = (item) => {
    setCheckboxes((prev) => ({
      ...prev,
      [item]: !prev[item],
    }));
  };

  return (
    <ScrollView style={styles.container}>
      {/* Title */}
      <Text style={styles.title}>Title</Text>

      {/* Checkboxes */}
      <View style={styles.checkboxContainer}>
        <Checkbox
          value={checkboxes.item1}
          onValueChange={() => toggleCheckbox('item1')}
          color={checkboxes.item1 ? '#4630EB' : undefined}
        />
        <Text style={styles.label}>Item 1</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <Checkbox
          value={checkboxes.item2}
          onValueChange={() => toggleCheckbox('item2')}
          color={checkboxes.item2 ? '#4630EB' : undefined}
        />
        <Text style={styles.label}>Item 2</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <Checkbox
          value={checkboxes.item3}
          onValueChange={() => toggleCheckbox('item3')}
          color={checkboxes.item3 ? '#4630EB' : undefined}
        />
        <Text style={styles.label}>Item 3</Text>
      </View>

      {/* Signatures */}
      <View style={styles.signatureContainer}>
        <Text style={styles.signatureLabel}>Person 1 Signature:</Text>
        <TextInput
          style={styles.input}
          placeholder="Enter signature"
          value={person1Signature}
          onChangeText={setPerson1Signature}
        />
      </View>

      <View style={styles.signatureContainer}>
        <Text style={styles.signatureLabel}>Person 2 Signature:</Text>
        <TextInput
          style={styles.input}
          placeholder="Enter signature"
          value={person2Signature}
          onChangeText={setPerson2Signature}
        />
      </View>

      {/* Date */}
      <Text style={styles.date}>Date: {formattedDate}</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
  },
  checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  label: {
    marginLeft: 8,
    fontSize: 16,
  },
  signatureContainer: {
    marginTop: 20,
  },
  signatureLabel: {
    fontSize: 16,
    marginBottom: 5,
  },
  input: {
    borderBottomWidth: 1,
    borderColor: '#000',
    paddingVertical: 5,
    fontSize: 16,
  },
  date: {
    marginTop: 30,
    fontSize: 16,
    textAlign: 'right',
  },
});

export default LegalText;