import { useState } from 'react'
import { usePalette } from 'react-image-palette-hook'; 

function App() {
  const [imageUrl, setImageUrl] = useState('https://picsum.photos/200')
  const { data } = usePalette(imageUrl)

  const handleImageChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const objectUrl = URL.createObjectURL(file)
      setImageUrl(objectUrl)
    }
  }

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Color Palette Demo</h1>
      
      <div className="mb-6">
        <input
          type="file"
          accept="image/*"
          onChange={handleImageChange}
          className="mb-4"
        />
      </div>

      <div className="mb-6">
        <img 
          src={imageUrl} 
          alt="Sample" 
          className="w-48 h-48 object-cover rounded-lg shadow-lg"
        />
      </div>

      {data.loading ? (
        <div className="text-gray-600">Loading palette...</div>
      ) : (
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.vibrant || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Vibrant</p>
              <p className="text-sm text-gray-600">{data.vibrant || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.darkVibrant || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Dark Vibrant</p>
              <p className="text-sm text-gray-600">{data.darkVibrant || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.darkMuted || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Dark Muted</p>
              <p className="text-sm text-gray-600">{data.darkMuted || 'N/A'}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default App