import { Section, Row, Toggle, type PrefsLike } from '../_ui'

export function EpisodesSection({ prefs }: { prefs: PrefsLike }) {
  return (
    <Section id="episodes" title="Episodes" description="Per-episode chips, badges, and gestures">
      <Row label="IMDB rating chips" hint="Yellow rating pill on each episode (Cinemeta data)">
        <Toggle value={prefs.episode.show.ratingChips} onChange={v => prefs.setEpisodeShow('ratingChips', v)} />
      </Row>
      <Row label="Filler badges (anime)" hint="Surface community filler / canon classifications when available">
        <Toggle value={prefs.episode.show.fillerChips} onChange={v => prefs.setEpisodeShow('fillerChips', v)} />
      </Row>
      <Row label="Season progress sparkline" hint="Tiny per-episode progress bars next to each season tab">
        <Toggle value={prefs.episode.show.sparklines} onChange={v => prefs.setEpisodeShow('sparklines', v)} />
      </Row>
      <Row label="Swipe-to-reveal actions" hint="Drag an episode row left to reveal Mark watched / unwatched">
        <Toggle value={prefs.episode.behavior.swipeActions} onChange={v => prefs.setEpisodeBehavior('swipeActions', v)} />
      </Row>
    </Section>
  )
}
