dyolink/frontend/src/components/ui/patient/PatientSummaryCard.tsx

'use client';

import { useTranslations } from 'next-intl';
import { formatMobileForDisplay } from '@/lib/phone';
import { Patient } from '@/types/patient';

interface PatientSummaryCardProps {
  patient?: Patient;
}

export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
  const t = useTranslations('patients');

  if (!patient) {
    return (
      <div className="surface-card p-4">
        <p className="text-sm text-text-muted">{t('selectPatient')}</p>
      </div>
    );
  }

  return (
    <div className="surface-card p-4 space-y-2">
      <h2 className="text-lg font-semibold text-text-primary">
        {patient.firstName} {patient.lastName}
      </h2>
      <p className="text-sm text-text-secondary">
        {t('mobileLabel')} {formatMobileForDisplay(patient.mobile)}
      </p>
      <p className="text-sm text-text-secondary">
        {t('emailLabel')} {patient.email || t('emptyValue')}
      </p>
      <p className="text-sm text-text-secondary">
        {t('statusLabel')}{' '}
        {patient.isActive ? t('statusActive') : t('statusInactive')}
      </p>
    </div>
  );
}