import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { CalendarDays, Calendar } from 'lucide-react'
import { LessonsTodayOverview } from './lessons-today-overview'
import { LessonsScheduleView } from './lessons-schedule-view'

interface LessonsDeskViewProps {
  canEdit: boolean
}

export function LessonsDeskView({ canEdit }: LessonsDeskViewProps) {
  const [subView, setSubView] = useState<'today' | 'schedule'>('today')

  return (
    <div className="flex flex-col h-full">
      {/* Sub-view toggle */}
      <div className="flex items-center gap-1 px-3 py-2 border-b border-border shrink-0 bg-card/50">
        <Button
          variant={subView === 'today' ? 'default' : 'ghost'}
          size="sm"
          className="h-8 gap-1.5"
          onClick={() => setSubView('today')}
        >
          <CalendarDays className="h-3.5 w-3.5" />
          Today
        </Button>
        <Button
          variant={subView === 'schedule' ? 'default' : 'ghost'}
          size="sm"
          className="h-8 gap-1.5"
          onClick={() => setSubView('schedule')}
        >
          <Calendar className="h-3.5 w-3.5" />
          Schedule
        </Button>
      </div>

      {/* Content */}
      <div className="flex-1 min-h-0 overflow-hidden">
        {subView === 'today' && <LessonsTodayOverview canEdit={canEdit} />}
        {subView === 'schedule' && <LessonsScheduleView />}
      </div>
    </div>
  )
}
