import React from "react";
import { View, Text, Image, StyleSheet, TextInput } from "react-native";

const ContactForm: React.FC = () => {
  return (
    <View style={styles.container}>
      <View style={styles.headerSection}>
        <Image
          source={require("../../../assets/images/image-contact.png")}
          style={styles.backgroundImage}
        />
        <Text style={styles.title}>Liên hệ với chúng tôi </Text>
        <Text style={styles.subtitle}>
          Bạn cung cấp dịch vụ sửa chữa và muốn niêm yết
        </Text>
      </View>

      <View style={styles.formSection}>
        <TextInput style={styles.inputField} placeholder="Họ và tên" />
        <TextInput style={styles.inputField} placeholder="Số điện thoại" />
        <TextInput
          style={styles.inputField}
          placeholder="Nội dung cần tư vấn"
        />
        <View style={styles.submitButton}>
          <Text style={styles.submitText}>Đăng ký</Text>
        </View>
      </View>
    </View>
  );
};

export default ContactForm;

const styles = StyleSheet.create({
  container: {
    marginTop: 56,
  },
  headerSection: {
    position: "relative",
    aspectRatio: 1.903,
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 73,
    paddingHorizontal: 77,
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
    resizeMode: "cover",
  },
  title: {
    fontSize: 20,
    fontWeight: "700",
    color: "rgba(255, 255, 255, 1)",
    textAlign: "center",
    zIndex: 1,
  },
  subtitle: {
    fontSize: 16,
    fontWeight: "400",
    color: "rgba(255, 255, 255, 1)",
    textAlign: "center",
    marginTop: 7,
    zIndex: 1,
  },
  formSection: {
    padding: 12,
  },
  inputField: {
    borderWidth: 1,
    borderColor: "rgba(214, 214, 214, 1)",
    paddingVertical: 10,
    paddingHorizontal: 16,
    marginBottom: 8,
    justifyContent: "center",
  },
  textAreaField: {
    borderWidth: 1,
    borderColor: "rgba(214, 214, 214, 1)",
    paddingTop: 10,
    paddingHorizontal: 16,
    paddingBottom: 40,
    marginBottom: 8,
  },
  inputLabel: {
    fontSize: 13,
    fontWeight: "400",
    color: "rgba(178, 178, 178, 1)",
  },
  submitButton: {
    backgroundColor: "#462F91",
    alignItems: "center",
    justifyContent: "center",
    minHeight: 40,
    paddingHorizontal: 24,
    paddingBottom: 1,
  },
  submitText: {
    fontSize: 14,
    fontWeight: "700",
    color: "rgba(255, 255, 255, 1)",
    textAlign: "center",
  },
});
