import { Card, Subtitle2, Caption1 } from '@fluentui/react-components'
import { CollectionsRegular } from '@fluentui/react-icons'
import { ProfileManager } from '../../components/ProfileManager'
import { useSettingsStyles } from './settingsStyles'

/**
 * Settings card for Media Profiles (PINCHFLAT): named download presets
 * (format/quality/folder-layout/extra-args) that a Library channel or playlist
 * can point at, so different sources download by different rules.
 */
export function MediaProfilesCard(): React.JSX.Element {
  const styles = useSettingsStyles()

  return (
    <Card className={styles.card}>
      <div className={styles.sectionHeader}>
        <CollectionsRegular className={styles.sectionIcon} />
        <Subtitle2 as="h3">Media profiles</Subtitle2>
      </div>
      <Caption1 className={styles.hint}>
        Named download presets a channel or playlist can use — bundle a format, quality, folder
        layout, and extra yt-dlp args, then point a Library source at it (its downloads follow the
        profile instead of the global defaults).
      </Caption1>

      <ProfileManager />
    </Card>
  )
}
