'use client'
import { useState } from 'react'
import { HexColorPicker } from 'react-colorful'

export default function ColorPicker() {
  const [color, setColor] = useState('#ff0000')

  return (
    <>
      <div>
        <HexColorPicker color={color} onChange={setColor} />
      </div>
      <div className='hex-color-box'>
        <div className="color-box-tit">HEX</div>
        <div className='color-hex-input'>
          <input type="text" className='input-origin' value={color} onChange={(e) => setColor(e.target.value)}/>
        </div>
        <div className="color-box" style={{backgroundColor : color}}></div>
      </div>
      <div className="default-color-wrap">
        <div className='default-tit'>基本色</div>
        <div className="color-button-wrap">
          <button className='default-color' style={{backgroundColor: '#EA575D'}} onClick={() => setColor('#EA575D')}></button>
          <button className='default-color' style={{backgroundColor: '#F29955'}} onClick={() => setColor('#F29955')}></button>
          <button className='default-color' style={{backgroundColor: '#F2C957'}} onClick={() => setColor('#F2C957')}></button>
          <button className='default-color' style={{backgroundColor: '#32975D'}} onClick={() => setColor('#32975D')}></button>
          <button className='default-color' style={{backgroundColor: '#3D7FED'}} onClick={() => setColor('#3D7FED')}></button>
          <button className='default-color' style={{backgroundColor: '#828282'}} onClick={() => setColor('#828282')}></button>
          <button className='default-color' style={{backgroundColor: '#ffffff'}} onClick={() => setColor('#ffffff')}></button>
          <button className='default-color' style={{backgroundColor: '#000000'}} onClick={() => setColor('#000000')}></button>
        </div>
      </div>
    </>
  )
}
