<script lang="ts">
  type Status = 'NOT_FOUND' | 'SUBMITTED' | 'APPROVED' | 'REJECTED' | 'REMOVED'
    | 'UNSTARTED' | 'ONGOING' | 'CLOSED'

  let { status }: { status: Status } = $props()

  const config: Record<Status, { label: string; cls: string }> = {
    NOT_FOUND:  { label: 'Not Found',  cls: 'badge-ghost' },
    SUBMITTED:  { label: 'Submitted',  cls: 'badge-warning' },
    APPROVED:   { label: 'Approved',   cls: 'badge-success' },
    REJECTED:   { label: 'Rejected',   cls: 'badge-error' },
    REMOVED:    { label: 'Removed',    cls: 'badge-ghost' },
    UNSTARTED:  { label: 'Upcoming',   cls: 'badge-info' },
    ONGOING:    { label: 'Active',     cls: 'badge-success' },
    CLOSED:     { label: 'Closed',     cls: 'badge-ghost' },
  }

  const { label, cls } = $derived(config[status] ?? { label: status, cls: 'badge-ghost' })
</script>

<span class="badge {cls} font-medium px-3">{label}</span>
