'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 { useActionState } from 'react'

export type ContactFormState = {
  message: string
  errors?: Record<string, string[] | undefined>
}

export type ContactFormAction = (
  prevState: ContactFormState,
  formData: FormData,
) => Promise<ContactFormState> | ContactFormState

type ContactFormViewProps = {
  schema?: 'base' | 'contrast'
  action: ContactFormAction
}

const initialState: ContactFormState = {
  message: '',
}

export const ContactFormView = ({ schema, action }: ContactFormViewProps) => {
  const [state, formAction, pending] = useActionState(action, 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>
  )
}
