import React from 'react';
import dayjs from 'dayjs';

interface ExpirationBadgeProps {
  /** The expiration date in ISO format (YYYY-MM-DD) */
  expirationDate: string | null | undefined;
  /** Additional CSS classes */
  className?: string;
}

/**
 * Displays a warning badge for documents expiring within 30 days or already expired.
 * Returns null if no expiration date is provided.
 */
export const ExpirationBadge: React.FC<ExpirationBadgeProps> = ({
  expirationDate,
  className = '',
}) => {
  if (!expirationDate) {
    return null;
  }

  const today = dayjs().startOf('day');
  const expDate = dayjs(expirationDate).startOf('day');
  const daysUntilExpiration = expDate.diff(today, 'day');

  // Already expired
  if (daysUntilExpiration < 0) {
    return (
      <span
        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 ${className}`}
      >
        Expired
      </span>
    );
  }

  // Expiring within 30 days
  if (daysUntilExpiration <= 30) {
    const label =
      daysUntilExpiration === 0
        ? 'Expires today'
        : daysUntilExpiration === 1
          ? 'Expires tomorrow'
          : `Expires in ${daysUntilExpiration} days`;

    return (
      <span
        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 ${className}`}
      >
        {label}
      </span>
    );
  }

  // Not expiring soon - no badge
  return null;
};

export default ExpirationBadge;