'use client'

import { useState } from 'react'
import { Cog } from 'lucide-react'
import { Settings } from './Settings'

export function SettingsButton() {
  const [isSettingsOpen, setIsSettingsOpen] = useState(false)

  return (
    <>
      <button
        onClick={() => setIsSettingsOpen(true)}
        className="absolute top-0 right-0 bg-white p-2 rounded-full shadow-md hover:shadow-lg transition-shadow duration-200"
        aria-label="Open settings"
      >
        <Cog className="w-6 h-6 text-gray-600" />
      </button>
      <Settings isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
    </>
  )
}