interface AvailabilityPillProps {
  available: boolean;
  lastOnline?: Date | null;
}

function timeAgo(date: Date): string {
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
  if (seconds < 60) return "just now";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;
  return "7+ days ago";
}

export default function AvailabilityPill({
  available,
  lastOnline,
}: AvailabilityPillProps) {
  const recentlyActive =
    !available &&
    lastOnline &&
    Date.now() - new Date(lastOnline).getTime() < 30 * 60 * 1000;

  if (available) {
    return (
      <span className="inline-flex items-center gap-1.5 rounded-full bg-green-500/20 px-2 py-0.5 text-[11px] font-medium text-green-400">
        <span className="relative flex h-2 w-2">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
          <span className="relative inline-flex h-2 w-2 rounded-full bg-green-400" />
        </span>
        Available Now
      </span>
    );
  }

  if (recentlyActive) {
    return (
      <span className="inline-flex items-center gap-1.5 rounded-full bg-yellow-500/20 px-2 py-0.5 text-[11px] font-medium text-yellow-400">
        <span className="h-2 w-2 rounded-full bg-yellow-400" />
        Recently Active
      </span>
    );
  }

  if (lastOnline) {
    return (
      <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-2 py-0.5 text-[11px] font-medium text-text-muted">
        <span className="h-2 w-2 rounded-full bg-text-muted/50" />
        {timeAgo(new Date(lastOnline))}
      </span>
    );
  }

  return null;
}