import { useFillerFlag } from '../../lib/episode-meta-context'

interface Props {
  season: number | null | undefined
  episode: number | null | undefined
}

/**
 * Filler/canon chip for anime episodes. Renders nothing when the show
 * isn't in our bundled filler list, so non-anime users never see it.
 *
 * - 'filler': bright orange chip
 * - 'mostly-filler': dimmer amber chip
 * - 'canon': no chip (canon is the assumed default)
 */
export default function FillerChip({ season, episode }: Props) {
  const flag = useFillerFlag(season, episode)
  if (!flag || flag === 'canon') return null
  if (flag === 'filler') {
    return (
      <span
        className="inline-flex items-center h-4 px-1.5 rounded text-[9.5px] font-bold uppercase tracking-[0.06em] text-orange-300 bg-orange-500/15 ring-1 ring-orange-500/25"
        title="Filler episode (community classification)"
      >
        Filler
      </span>
    )
  }
  return (
    <span
      className="inline-flex items-center h-4 px-1.5 rounded text-[9.5px] font-bold uppercase tracking-[0.06em] text-amber-300 bg-amber-500/15 ring-1 ring-amber-500/25"
      title="Mostly filler episode (community classification)"
    >
      Mostly filler
    </span>
  )
}
