Medical Profile 01

"use client";

import { cn } from "cn";
import * as React from "react";

import { AlertsCard } from "@/components/blocks/alerts-card-01/components/alerts-card";
import {
  activity,
  periods,
  weeks,
} from "@/components/blocks/medical-profile-01/components/medical-profile-data";
import { MedicalProfilePatientsTable } from "@/components/blocks/medical-profile-01/components/medical-profile-patients-table";
import { MostActiveDaysCard } from "@/components/blocks/most-active-days-card-01/components/most-active-days-card";
import { PatientInfoCard } from "@/components/blocks/patient-info-card-01/components/patient-info-card";
import { SleepScoreCard } from "@/components/blocks/sleep-score-card-01/components/sleep-score-card";
import { StepsCard } from "@/components/blocks/steps-card-01/components/steps-card";
import { Reveal } from "@/components/ui/reveal";

// 500ms, 12px rise, each row 40ms after the last. The cards inside a row do
// not animate again.
function Row({
  step,
  className,
  children,
}: {
  step: number;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <Reveal index={step} className="min-w-0">
      <div className={className}>{children}</div>
    </Reveal>
  );
}

/**
 * The body of a medical profile: identity, steps, sleep, activity calendar,
 * alerts and a patient table. It carries no navigation or heading, so it
 * drops into an app shell or any page. Pass `popupClassName` (a theme scope)
 * so menus and tooltips rendered outside the block pick up the same tokens.
 */
export function MedicalProfile({
  className,
  popupClassName,
}: {
  className?: string;
  popupClassName?: string;
}) {
  return (
    <div className={cn("@container flex min-w-0 flex-col gap-4", className)}>
      <Row step={0} className="grid min-w-0 gap-4 @4xl:grid-cols-3">
        <PatientInfoCard />
        <StepsCard
          weeks={weeks}
          title="Steps"
          unit="total steps"
          className="max-w-none"
        />
        <SleepScoreCard periods={periods} className="max-w-none" />
      </Row>
      <Row step={1} className="grid min-w-0 gap-4 @4xl:grid-cols-3">
        <MostActiveDaysCard
          data={activity}
          initialDate="2026-07-10"
          className="@4xl:col-span-2"
        />
        <AlertsCard />
      </Row>
      <Row step={2}>
        <MedicalProfilePatientsTable popupClassName={popupClassName} />
      </Row>
    </div>
  );
}