Orb Picker

"use client"

import * as React from "react"

import {
  ORB_PALETTES,
  type OrbPaletteName,
} from "@/components/orbs/orb-palettes"
import { OrbPicker } from "@/components/orbs/orb-picker"
import { VoiceOrb } from "@/components/orbs/voice-orb"

// The picker choosing the assistant's orb: pick a row, the Voice Orb takes
// that colorway.
export default function Demo() {
  const [value, setValue] = React.useState<string>("planet-14")
  const palette = (
    value in ORB_PALETTES ? value : "planet-14"
  ) as OrbPaletteName
  return (
    // Stacked on a phone, side by side from sm, so the rows keep their width.
    <div className="flex w-full max-w-2xl flex-col items-center gap-8 p-6 sm:flex-row sm:gap-10">
      <VoiceOrb palette={palette} size={160} />
      <div className="flex w-full min-w-0 flex-col gap-3 sm:flex-1">
        <p className="font-display text-xl">Assistant color</p>
        <OrbPicker
          aria-label="Assistant color"
          value={value}
          onValueChange={setValue}
        />
      </div>
    </div>
  )
}