import React from "react";
import Form from "../form/Form";
import FormRow from "@/components/form/FormRow";
import TextArea from "../form/inputs/TextArea";
import TextInput from "../form/inputs/TextInput";
import { SendEmailMessageToPreSignupClientsParamsType } from "@/api-queries/events/send-email-message-to-pre-signup-clients-query";

export type SendEmailMessageToPreSignupClientsProps = {
    onSubmit: (data: SendEmailMessageToPreSignupClientsParamsType) => Promise<void>;
};

const SendEmailMessageToPreSignupClients = ({
    onSubmit,
}: SendEmailMessageToPreSignupClientsProps) => {
    return (
        <>
            <h2 className='text-light-black text-[24px] font-bold leading-[1.2] mb-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                Trimite mesaj listei de preinregistrati prin email
            </h2>

            <Form<SendEmailMessageToPreSignupClientsParamsType>
                submitCallback={onSubmit}
                extraClasses='w-[100%] items-center'
            >
                <FormRow
                    label='Subiect'
                    htmlFor='clientsEmailSubject'
                    inputName='clientsEmailSubject'
                    groupCssClasses='w-[100%] max-w-[434px]'
                >
                    <TextInput
                        id='clientsEmailSubject'
                        name='clientsEmailSubject'
                        placeholder='Subiectul email-ului'
                    />
                </FormRow>

                <FormRow
                    label='Mesaj'
                    htmlFor='clientsEmailMessage'
                    inputName='clientsEmailMessage'
                    groupCssClasses='w-[100%] max-w-[434px]'
                >
                    <TextArea
                        id='clientsEmailMessage'
                        name='clientsEmailMessage'
                        extraClassnames='!h-[200px]'
                    />
                </FormRow>

                <FormRow
                    label='Text buton'
                    htmlFor='bottomButtonText'
                    inputName='bottomButtonText'
                    groupCssClasses='w-[100%] max-w-[434px]'
                >
                    <TextInput
                        id='bottomButtonText'
                        name='bottomButtonText'
                        placeholder='Text buton'
                    />
                </FormRow>

                <FormRow
                    label='Link buton'
                    htmlFor='bottomButtonLink'
                    inputName='bottomButtonLink'
                    groupCssClasses='w-[100%] max-w-[434px]'
                >
                    <TextInput
                        id='bottomButtonLink'
                        name='bottomButtonLink'
                        placeholder='Link buton'
                    />
                </FormRow>

                <button className='w-[100%] border-solid border-dark-orange border-[1px] rounded-[8px] flex items-center justify-center bg-white h-[40px] text-dark-orange text-[14px] leading-[1.5] font-medium max-w-[22.75rem] lg:w-[102px]'>
                    Trimite
                </button>
            </Form>
        </>
    );
};

export default SendEmailMessageToPreSignupClients;