import React from 'react'
import { usePlayerContext } from '../../contexts/PlayerContext'
import { SettingsIcon } from '../../icons'
import './ControlButton.css'

export const SettingsButton: React.FC = () => {
  const { toggleSettings } = usePlayerContext()

  return (
    <button
      className="control-button settings-button"
      onMouseDown={(event) => event.stopPropagation()}
      onClick={toggleSettings}
      aria-label="Settings"
      title="Settings"
    >
      <SettingsIcon size={24} color="var(--player-text)" />
    </button>
  )
}