import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { Toaster } from '../ui/toast'
import { JoinCodeInput } from './JoinCodeInput'

interface JoinScreenProps {
  sessionCode: string
  joinMethod?: 'code' | 'link'
  onJoined: (participantId: string) => void
}

export function JoinScreen({ sessionCode, joinMethod = 'code', onJoined }: JoinScreenProps) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-xl">Masuk ke session</CardTitle>
          <CardDescription>{joinMethod === 'link' ? 'Isi nama Anda untuk masuk dan memberi sinyal ke guru.' : 'Masukkan data untuk bergabung ke session live.'}</CardDescription>
        </CardHeader>
        <CardContent>
          <JoinCodeInput sessionCode={sessionCode} joinMethod={joinMethod} onJoined={onJoined} />
        </CardContent>
      </Card>
      <Toaster />
    </div>
  )
}