import { Check, Sparkles, Archive, Trash2 } from 'lucide-react';
import type { Wish } from '@family-wishlist/shared';
import { cn } from '@/lib/cn';

interface Props {
  wish: Wish & { isNewForOwner?: boolean };
  view: 'owner' | 'guest';
  className?: string;
}

export function WishBadges({ wish, view, className }: Props) {
  const badges: JSX.Element[] = [];

  const isNew =
    view === 'owner' ? wish.isNewForOwner === true : wish.isNewForGuest === true;
  if (isNew && wish.status === 'ACTIVE') {
    badges.push(
      <span className="wish-badge wish-badge--new" key="new">
        <Sparkles className="h-3 w-3" aria-hidden />
        new
      </span>,
    );
  }
  if (wish.status === 'COMPLETED') {
    badges.push(
      <span className="wish-badge wish-badge--completed" key="done">
        <Check className="h-3 w-3" aria-hidden />
        fulfilled
      </span>,
    );
  }
  if (wish.status === 'ARCHIVED' && view === 'owner') {
    badges.push(
      <span className="wish-badge wish-badge--archived" key="arch">
        <Archive className="h-3 w-3" aria-hidden />
        archived
      </span>,
    );
  }
  if (wish.status === 'DELETED' && view === 'owner') {
    badges.push(
      <span className="wish-badge wish-badge--deleted" key="del">
        <Trash2 className="h-3 w-3" aria-hidden />
        trash
      </span>,
    );
  }

  if (badges.length === 0) return null;
  return <div className={cn('flex flex-wrap gap-1.5', className)}>{badges}</div>;
}