import { LocalizedText } from "@workspace/i18n"
import { MoonIcon, SunIcon } from "@workspace/ui/components/icon"
import { cn } from "@workspace/ui/lib/utils"

import { appearanceMessages } from "../messages"
import type { ThemeColorConfig, ThemeScheme } from "../theme"
import {
  accentColorSwatches,
  baseColorSwatches,
  ThemeColorPicker,
} from "./theme-color-picker"

export interface ThemeConfigCardProps {
  className?: string
  config: ThemeColorConfig
  onConfigChange: (config: ThemeColorConfig) => void
  scheme: ThemeScheme
}

export function ThemeConfigCard({
  className,
  config,
  onConfigChange,
  scheme,
}: ThemeConfigCardProps) {
  return (
    <section className={cn("w-full max-w-md rounded-xl border", className)}>
      <header className="flex gap-4 border-b p-3">
        {scheme === "light" ? (
          <SunIcon className="size-5" />
        ) : (
          <MoonIcon className="size-5" />
        )}
        <h2>
          <LocalizedText message={appearanceMessages.themeColors} />
        </h2>
      </header>
      <div className="space-y-4 p-4">
        <p>
          <LocalizedText message={appearanceMessages.themeColorsDescription} />
        </p>
        <ThemeColorPicker
          swatches={baseColorSwatches}
          title={<LocalizedText message={appearanceMessages.baseColor} />}
          value={config.baseColor}
          onValueChange={(baseColor) =>
            onConfigChange({ ...config, baseColor })
          }
        />
        <ThemeColorPicker
          swatches={accentColorSwatches}
          title={<LocalizedText message={appearanceMessages.accentColor} />}
          value={config.accentColor}
          onValueChange={(accentColor) =>
            onConfigChange({ ...config, accentColor })
          }
        />
      </div>
    </section>
  )
}