import { FC, ReactNode } from 'react'
import styles from './AuthLayout.module.scss'

interface AuthLayoutProps {
  children?: ReactNode
}
const AuthLayout: FC<AuthLayoutProps> = ({ children }) => (
  <div className={`${styles.root} min-h-screen`}>
    <aside className="flex items-center justify-center bg-pink-300">
      <h1 className="text-4xl">Wishes</h1>
    </aside>
    <main className="flex flex-col items-center justify-center">
      <div>{children}</div>
    </main>
  </div>
)

interface AuthFieldProps {
  name: string
  required?: boolean
  type: 'text' | 'password'
  children?: ReactNode
}
const AuthField: FC<AuthFieldProps> = (props) => {
  return (
    <div>
      <label
        htmlFor={props.name}
        className="mb-2 block text-sm font-bold text-gray-800"
      >
        {props.children}
      </label>
      <input
        type="text"
        name={props.name}
        required
        className="w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-800"
      />
    </div>
  )
}

interface AuthPasswordProps {
  name: string
  required?: boolean
  children?: ReactNode
}
export const AuthPassword: FC<AuthPasswordProps> = (props) => (
  <AuthField {...props} type="password" />
)

interface AuthInputProps {
  name: string
  required?: boolean
  children?: ReactNode
}
export const AuthInput: FC<AuthPasswordProps> = (props) => (
  <AuthField {...props} type="text" />
)

export default AuthLayout