'use client';

import { Pill } from 'lucide-react';
import type { PatientEmrMedication } from '@/lib/api-types';

interface MedicationsStripProps {
  medications: PatientEmrMedication[];
}

/**
 * Chip-row of the patient's current medications. Surfaces dose + frequency
 * inline so the prescribing doctor can eyeball interactions before opening
 * the Co-Pilot check.
 */
export function MedicationsStrip({ medications }: MedicationsStripProps) {
  if (medications.length === 0) {
    return null;
  }

  return (
    <div className="rounded-md border border-denseSurface-border bg-white p-3">
      <div className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-ink-2">
        <Pill className="h-3.5 w-3.5 text-brand-500" />
        Current medications
        <span className="text-ink-3">({medications.length})</span>
      </div>
      <ul className="flex flex-wrap gap-1.5">
        {medications.map((m) => (
          <li
            key={m.id}
            className="inline-flex items-center gap-1.5 rounded border border-brand-100 bg-brand-50 px-2 py-1 text-xs"
            title={
              m.genericName
                ? `${m.genericName} · ${m.route}`
                : m.route ?? undefined
            }
          >
            <span className="font-semibold text-brand-700">
              {m.medicationName}
            </span>
            <span className="font-mono text-[11px] text-ink-2">
              {m.dose} · {m.frequency}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}