import { Badge } from '../ui/badge'

export interface SessionInfoData {
  course_title: string
  instructor_name: string | null
  duration_minutes: number
  allow_anonymous: boolean
}

interface SessionInfoProps {
  info: SessionInfoData
}

export function SessionInfo({ info }: SessionInfoProps) {
  return (
    <div className="flex flex-col items-center text-center">
      <h1 className="text-2xl font-bold text-ink">{info.course_title}</h1>
      <div className="mt-2 flex items-center gap-2">
        {info.instructor_name && <span className="text-sm text-body">Pengajar: {info.instructor_name}</span>}
        {info.instructor_name && <span className="text-gray-300">•</span>}
        <Badge variant="neutral">{info.duration_minutes} min</Badge>
      </div>
    </div>
  )
}