Omarchy Theme Picker

"use client"

import { CheckIcon } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { useOmarchyTheme } from "@/hooks/use-omarchy-theme"
import { OMARCHY_THEMES } from "@/lib/omarchy-palette"
import { OmarchySwatch } from "@/components/ui/omarchy-swatch"

export function OmarchyThemePicker() {
  const { theme, setTheme } = useOmarchyTheme()

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Theme</CardTitle>
        <CardDescription>
          Pick the Omarchy palette to apply across the desktop.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ToggleGroup
          className="flex-wrap"
          value={[theme]}
          onValueChange={(value) => {
            const next = value.at(-1)

            if (next && next !== theme) {
              setTheme(next as typeof theme)
            }
          }}
        >
          {OMARCHY_THEMES.map((item) => (
            <ToggleGroupItem
              key={item.name}
              value={item.name}
              variant="outline"
              aria-label={item.label}
            >
              <span
                aria-hidden
                className="size-2.5 shrink-0 rounded-full"
                style={{ backgroundColor: item.accent }}
              />
              {item.label}
              {item.name === theme ? (
                <CheckIcon data-icon="inline-end" />
              ) : null}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </CardContent>
      <CardFooter className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground">Active</span>
        <OmarchySwatch theme={theme} />
      </CardFooter>
    </Card>
  )
}