'use client'

import { SettingsToggleRow } from './components.js'
import { AVAILABLE_FONTS } from '../../components/ThemeProvider.js'
import type { UseAppearanceSettings } from './useAppearanceSettings.js'

export function TypographyMotionCard({
  s,
  canEdit,
}: {
  s: UseAppearanceSettings
  canEdit: boolean
}) {
  return (
    <section className="border-border bg-card rounded-lg border p-6">
      <header className="mb-4">
        <h3 className="text-foreground text-lg font-medium">Typography &amp; Motion</h3>
        <p className="text-muted-foreground mt-0.5 text-sm">
          Admin UI font and motion preferences.
        </p>
      </header>

      <div className="space-y-5">
        <div>
          <label
            htmlFor="content-font"
            className="text-foreground mb-1 block text-base font-medium"
          >
            Content font
          </label>
          <p className="text-muted-foreground mb-2 text-sm">
            Applies to the admin UI. Falls back to the system font if not installed.
          </p>
          <select
            id="content-font"
            value={s.appearance.font}
            disabled={!canEdit}
            onChange={(e) => s.setFont(e.target.value)}
            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
          >
            {AVAILABLE_FONTS.map((font) => (
              <option key={font} value={font}>
                {font}
              </option>
            ))}
            {/* Preserve a config-defined font that isn't in the curated list. */}
            {!AVAILABLE_FONTS.includes(s.appearance.font as (typeof AVAILABLE_FONTS)[number]) && (
              <option value={s.appearance.font}>{s.appearance.font}</option>
            )}
          </select>
        </div>

        <div className="border-border border-t pt-4">
          <SettingsToggleRow
            label="Reduce motion"
            description="Minimize animations and transitions across the admin. Focus and state changes are preserved."
            checked={s.appearance.reduceMotion}
            onChange={s.setReduceMotion}
            disabled={!canEdit}
          />
        </div>
      </div>
    </section>
  )
}
