1import { CircleDot, CircleCheck } from 'lucide-react'
 2import { cn } from '@/lib/utils'
 3import { Status } from '@/__generated__/graphql'
 4
 5interface StatusBadgeProps {
 6  status: Status
 7  className?: string
 8}
 9
10// Open / Closed status badge with icon. Used in BugDetailPage header.
11export function StatusBadge({ status, className }: StatusBadgeProps) {
12  const isOpen = status === Status.Open
13
14  return (
15    <span
16      className={cn(
17        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium',
18        isOpen
19          ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
20          : 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
21        className,
22      )}
23    >
24      {isOpen ? <CircleDot className="size-3" /> : <CircleCheck className="size-3" />}
25      {isOpen ? 'Open' : 'Closed'}
26    </span>
27  )
28}