"use client";
// Yahan humne file ka sahi naam 'apple-color-picker' likha hai
import { Component } from "@/components/ui/apple-color-picker"; 
import { useState } from 'react';

export default function DemoOne() {
  const [isOpen, setIsOpen] = useState(true); 
  const [color, setColor] = useState('#007AFF');

  return (
    <div className="flex flex-col items-center justify-center w-full h-screen bg-gray-100 transition-colors" style={{ backgroundColor: color }}>
      <button onClick={() => setIsOpen(true)} className="px-4 py-2 bg-white text-black font-semibold rounded-lg shadow-md mb-8">
         Open Color Picker
      </button>
      
      <Component 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        initialColor={color}
        onChange={(newColor: string) => setColor(newColor)}
      />
    </div>
  );
}