"use client";

import * as React from "react"

import { createPortal } from "react-dom"

import { ColorPicker } from "./color-picker"

import { Select } from "./select"

export function ColorPickerDemo() {

const [mounted, setMounted] = React.useState(false)

const [mode, setMode] = React.useState("solid")

React.useEffect(() => {

setMounted(true)

}, [])

// Custom Controls to render in the right panel portal

const controls = (

<div className="flex flex-col gap-5 mt-6 border-t border-black/5 dark:border-white/5 pt-6">

<div className="flex items-center gap-2 text-[13px] font-semibold text-[#1F1F1F] dark:text-[#D4D4D8]">

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[#9FE870]"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>

Preview

</div>

<div className="flex flex-col gap-2">

<Select

value={mode}

onValueChange={setMode}

options={[

{ value: "solid", label: "Solid" },

{ value: "gradient", label: "Gradient" }

]}

className="w-full"

/>

</div>

</div>

)

const portalTarget = typeof document !== "undefined" ? document.getElementById("custom-controls-portal") : null

return (

<div className="w-full h-full flex items-center justify-center p-4 sm:p-6 md:p-8 bg-zinc-50 dark:bg-[#141414]">

{mounted && portalTarget && createPortal(controls, portalTarget)}

<ColorPicker mode={mode as "solid" | "gradient"} />

</div>

)

}