import React, { useState, type ReactElement } from 'react'
import Tabs from '@/Components/Tabs/Tabs'
import SignUp, { type ISignUpProps } from '@/Components/Auth/SignUp'
import SignIn, { type ISignInProps } from '@/Components/Auth/SignIn'

interface IAuthProps {
  signUpProps?: ISignUpProps
  signInProps?: ISignInProps
}

export default function Auth({ signUpProps, signInProps }: IAuthProps): ReactElement {
  "use client";
  const [selected, setSelected] = useState('sign-up')
  return (
    <Tabs
      className='max-w-lg'
      selectedTab={selected}
      onChange={(t) => { setSelected(t) }}
      tabs={
        [
          {
            id: 'sign-up',
            label: 'Sign Up',
            content: <SignUp {...signUpProps} />,
            activeNavClassName: 'w-1/2 font-normal border-b-2 border-b-slate-800',
            navClassName: 'w-1/2'
          },
          {
            id: 'sign-in',
            label: 'Sign In',
            content: <SignIn {...signInProps} />,
            activeNavClassName: 'w-1/2 font-normal border-b-2 border-b-slate-800',
            navClassName: 'w-1/2'
          }
        ]}
    />
  )
}
