'use client'

import { Input } from '@/components/Input/Input'
import { Button } from '@/components/Button/Button'
import styles from "./styles.module.scss"
import classNames from 'classnames'
import { send } from '@/app/actions'
import { useActionState } from 'react'

type ContactFormProps = {
  schema?: "base" | "contrast"
}

const initialState = {
  message: '',
}

export const ContactForm = ({schema}: ContactFormProps) => {

  const [state, formAction, pending] = useActionState(send, initialState)

  return (
    <form action={formAction}>
      <div className={classNames(styles.row, styles.firsRow)}>
        <Input name={"name"} type={"text"} placeholder={"Name"} />
        <Input name={"email"} type={"email"}  placeholder={"E-Mail Adresse"} />
      </div>
      <div className={styles.row}>
        <Input name={"subject"} type={"text"} placeholder={"Thema"} />
      </div>
      <div className={styles.row}>
        <Input name={"message"} type={"textarea"} placeholder={"Ihre Nachricht"} />
      </div>
      <p>
        {state.message}
      </p>
      <div className={styles.row}>
        <Button size={"lg"} type={"submit"} schema={schema} disabled={pending}>Abschicken</Button>
      </div>
    </form>
  )
}