import React from "react";

import Button from "./UI/Button";
import Input from "./UI/Input";
import Textarea from "./UI/Textarea";

const Contact = ({white, ...props}) => {
    return (
        <section {...props} className={white ? 'py-32' : 'py-32 bg-[#0E0808]'}>
            <div className="container mx-auto px-24">
                <h2 className={white ? 'text-3xl mb-16 font-semibold text-slate-800 text-center uppercase' : 'text-3xl mb-16 font-semibold text-white text-center uppercase'}>Связаться с нами</h2>
                <div className="flex mb-10">
                    <div className="flex flex-col basis-[40%] mr-6">
                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
                        <Input className={white ? 'border-2 !border-slate-700' : null} label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
                    </div>
                    <div className="flex basis-[60%]">
                        <Textarea className={white ? 'h-full resize-none border-2 !border-slate-700' : 'h-full resize-none'} label='Ваше обращение:' placeholder='Обращение...'></Textarea>
                    </div>
                </div>
                <div className="flex justify-center">
                    <Button>Отправить форму</Button>
                </div>
            </div>
        </section>
    )
}

export default Contact;