import { TreatmentHistoryItem } from '@/types/patient';

interface TreatmentHistoryPreviewProps {
  items: TreatmentHistoryItem[];
  loading?: boolean;
}

export function TreatmentHistoryPreview({ items, loading = false }: TreatmentHistoryPreviewProps) {
  return (
    <div className="surface-card p-4 space-y-3">
      <h3 className="text-base font-semibold text-text-primary">Treatment History</h3>

      {loading && <p className="text-sm text-text-muted">Loading treatment history...</p>}

      {!loading && items.length === 0 && (
        <p className="text-sm text-text-muted">No treatment history yet.</p>
      )}

      <div className="space-y-2">
        {items.map((item) => (
          <div key={item.id} className="border border-border/60 rounded-[var(--radius-sm)] p-3">
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium text-text-primary">{item.title}</p>
              <p className="text-xs text-text-muted">
                {new Date(item.treatmentAt).toLocaleDateString()}
              </p>
            </div>
            <p className="text-xs text-text-secondary mt-1">
              Status: {item.status}
              {item.tooth ? ` | Tooth: ${item.tooth}` : ''}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}