import { Card, Subtitle2, Caption1 } from '@fluentui/react-components'
import { OptionsRegular } from '@fluentui/react-icons'
import { useSettings } from '../../store/settings'
import { DownloadOptionsForm } from '../../components/DownloadOptionsForm'
import { useSettingsStyles } from './settingsStyles'

export function PostProcessingCard(): React.JSX.Element {
  const styles = useSettingsStyles()
  const defaultKind = useSettings((s) => s.defaultKind)
  const downloadOptions = useSettings((s) => s.downloadOptions)
  const update = useSettings((s) => s.update)

  return (
    <Card className={styles.card}>
      <div className={styles.sectionHeader}>
        <OptionsRegular className={styles.sectionIcon} />
        <Subtitle2 as="h3">Post-processing</Subtitle2>
      </div>
      {/* UX8: this card is the advanced half — the default format itself (video/
          audio + quality) lives in the Downloads card, co-located just above. */}
      <Caption1 className={styles.hint}>
        Advanced conversion applied to every new download — container, codec, subtitles,
        SponsorBlock (yt-dlp and ffmpeg do the work). The default format itself is set in the
        Downloads card above.
      </Caption1>

      <DownloadOptionsForm
        value={downloadOptions}
        kind={defaultKind}
        onChange={(o) => update({ downloadOptions: o })}
      />
    </Card>
  )
}
