import React from 'react';
import clsx from 'clsx';
import type { Guest } from '../../types/guest';

interface Props {
  guest: Pick<Guest, 'checked_in_count' | 'total_attendees'>;
  size?: 'sm' | 'md';
}

export function StatusBadge({ guest, size = 'md' }: Props) {
  const { checked_in_count, total_attendees } = guest;
  const isDone = checked_in_count >= total_attendees;
  const isPartial = checked_in_count > 0 && !isDone;

  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full font-medium',
        size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-sm',
        isDone && 'bg-emerald-100 text-emerald-700',
        isPartial && 'bg-amber-100 text-amber-700',
        !isDone && !isPartial && 'bg-slate-100 text-slate-500'
      )}
    >
      {isDone ? 'Checked In' : isPartial ? `${checked_in_count}/${total_attendees}` : 'Pending'}
    </span>
  );
}
