import React from "react"
import { I18nProvider } from "@workspace/i18n"
import { messages as englishMessages } from "@workspace/appearance/locales/en-US"
import { messages as chineseMessages } from "@workspace/appearance/locales/zh-Hans"
import type { ThemeColorConfig } from "@workspace/appearance/theme"

import { AccentPicker } from "./AccentPicker"

const catalogs = {
  "en-US": englishMessages,
  "zh-Hans": chineseMessages,
} as const

export default function ThemeColorsExample({
  locale,
}: {
  locale: "en-US" | "zh-Hans"
}) {
  const [config, setConfig] = React.useState<ThemeColorConfig>({
    accentColor: "indigo",
    baseColor: "neutral",
  })

  const title = locale === "zh-Hans" ? "强调色" : "Accent color"

  return (
    <I18nProvider catalogs={catalogs} locale={locale}>
      <div className="mx-auto flex max-w-xl flex-col gap-6">
        <AccentPicker
          config={config}
          title={title}
          onConfigChange={setConfig}
        />
        <AccentPicker
          config={config}
          title={title}
          variant="swatch"
          onConfigChange={setConfig}
        />
      </div>
    </I18nProvider>
  )
}