import React, { useState } from 'react';
import './Settings.css';

interface SettingsProps {
  showCaptions: boolean;
  onToggleCaptions: () => void;
  avatarEnabled: boolean;
  onToggleAvatar: () => void;
  onClose: () => void;
}

export const Settings: React.FC<SettingsProps> = ({
  showCaptions,
  onToggleCaptions,
  avatarEnabled,
  onToggleAvatar,
  onClose,
}) => {
  return (
    <div className="settings-overlay" role="dialog" aria-label="Settings">
      <div className="settings-panel">
        <div className="settings-header">
          <h2>Settings</h2>
          <button onClick={onClose} className="close-button" aria-label="Close settings">
            ✕
          </button>
        </div>

        <div className="settings-content">
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={showCaptions}
                onChange={onToggleCaptions}
              />
              <span>Show captions</span>
            </label>
          </div>

          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={avatarEnabled}
                onChange={onToggleAvatar}
              />
              <span>Enable avatar</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};