Patient Info Card 01

"use client";

import {
  RiAsterisk,
  RiDropLine,
  RiAddLine,
  RiStethoscopeLine,
  RiUserLine,
} from "@remixicon/react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

const details = [
  { icon: RiAsterisk, label: "Date of birth", value: "12 March, 1989" },
  { icon: RiUserLine, label: "Gender", value: "Female" },
  { icon: RiDropLine, label: "Blood type", value: "O positive" },
  { icon: RiStethoscopeLine, label: "Primary doctor", value: "Alex Morgan" },
];

export function PatientInfoCard() {
  return (
    <Card
      radius={20}
      size="flush"
      variant="muted"
      render={<section aria-label="Patient information" />}
      className="h-82.5 w-full min-w-0"
    >
      <div className="flex h-full flex-col items-center gap-3.75 px-2.5 pt-6 pb-2.5">
        <div className="relative">
          <Avatar className="size-16.5">
            <AvatarFallback>
              <span className="text-2xl leading-6">JD</span>
            </AvatarFallback>
          </Avatar>
          <Button
            type="button"
            variant="outline"
            size="icon-xs"
            shape="pill"
            tooltip="Add profile photo"
            className="absolute -top-0.5 -end-0.5"
          >
            <RiAddLine aria-hidden="true" />
          </Button>
        </div>
        <p className="text-xl leading-6.5 font-medium whitespace-nowrap text-foreground">
          Jordan Davis
        </p>
        <div className="flex w-full flex-1 flex-col gap-2.5">
          {details.map(({ icon: Icon, label, value }) => (
            <div
              key={label}
              className="flex w-full items-center justify-between gap-2 rounded-[10px] bg-(--surface-nested,var(--background)) px-2.5 py-2"
            >
              <div className="flex items-center gap-1.5 text-muted-foreground">
                <Icon className="size-4 shrink-0" aria-hidden="true" />
                <span className="text-sm leading-5 whitespace-nowrap">
                  {label}
                </span>
              </div>
              <span className="text-sm leading-5 font-medium whitespace-nowrap text-foreground">
                {value}
              </span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}