import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@radix-ui/react-label'
import { Inter } from 'next/font/google'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useState } from 'react'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  const router = useRouter()
  const [roomName, setRoomName] = useState('')

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (!roomName) {
      alert('请输入房间名');
      return;
    }
    router.push(`/room/${roomName}`);
  }

  return (
    <main
      className={`${inter.className}`}
    >
      <Head>
        <title>一起看</title>
      </Head>
      <div className='flex justify-center items-center h-screen'>
        <form className='flex flex-col gap-3' onSubmit={onSubmit}>
          <Label className='font-bold text-center'>一起看</Label>
          <Input placeholder='请输入房间名' onChange={(e) => setRoomName(e.target.value)} name="roomId" autoCapitalize="none" />
          <Button type='submit'>加入</Button>
        </form>
      </div>
    </main>
  )
}
