import { CalendarDays, CalendarX } from "lucide-react"

import { ScheduleList } from "@/shared/components/schedule/schedule-list"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import type { ChildScheduleItem } from "@/modules/parent/types"

export function ChildScheduleCard({
  items,
  childName,
}: {
  items: ChildScheduleItem[]
  childName: string
}) {
  const hasSchedule = items.length > 0

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <CalendarDays className="h-4 w-4 text-muted-foreground" />
          {childName}&apos;s Today Schedule
        </CardTitle>
      </CardHeader>
      <CardContent>
        {!hasSchedule ? (
          <EmptyState
            icon={CalendarX}
            title="No classes today"
            description="The timetable is clear for today."
            className="border-none h-48"
          />
        ) : (
          <ScheduleList
            items={items}
            variant="separator"
            spacingClassName="space-y-3"
          />
        )}
      </CardContent>
    </Card>
  )
}