import { ChildGradeSummary } from "./child-grade-summary"
import { ChildHomeworkSummary } from "./child-homework-summary"
import { ChildScheduleCard } from "./child-schedule-card"
import type { ChildDashboardData } from "@/modules/parent/types"

export function ChildDetailPanel({ child }: { child: ChildDashboardData }) {
  const { basicInfo, todaySchedule, homeworkSummary, gradeTrend } = child
  const childName = basicInfo.name ?? "Child"

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="md:col-span-1 lg:col-span-2 space-y-6">
          <ChildHomeworkSummary
            summary={homeworkSummary}
            childId={basicInfo.id}
            childName={childName}
          />
          <ChildGradeSummary grades={gradeTrend} childId={basicInfo.id} childName={childName} />
        </div>
        <div className="space-y-6">
          <ChildScheduleCard items={todaySchedule} childName={childName} />
        </div>
      </div>
    </div>
  )
}