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

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

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