/**
 * JTZL_WebIRC_Chat - Settings Panel Component
 *
 * @package   JTZL_WebIRC_Chat
 * @copyright Copyright (c) 2025, JT. G.
 * @license   GPL-3.0+
 * @since     3.0.0
 */

import { memo } from 'react';
import { Button } from '../ui/button';

interface SettingsPanelProps {
	onClose: () => void;
	className?: string;
}

/**
 * Settings panel component for user preferences.
 * Only loaded when settings are accessed.
 *
 * @since 3.0.0
 */
export const SettingsPanel = memo(
	({ onClose, className }: SettingsPanelProps) => {
		return (
			<div
				className={`bg-card border border-border rounded-lg p-4 ${className || ''}`}
			>
				<div className="flex items-center justify-between mb-4">
					<h3 className="text-lg font-semibold text-card-foreground">
						Settings
					</h3>
					<Button variant="ghost" size="sm" onClick={onClose}>
						×
					</Button>
				</div>
				<div className="space-y-4">
					<div>
						<div className="text-sm font-medium text-card-foreground">
							Notification Settings
						</div>
						<p className="text-xs text-muted-foreground">
							Configure how you receive notifications
						</p>
					</div>
					<div>
						<div className="text-sm font-medium text-card-foreground">
							Display Preferences
						</div>
						<p className="text-xs text-muted-foreground">
							Customize the appearance of the chat interface
						</p>
					</div>
				</div>
			</div>
		);
	}
);

SettingsPanel.displayName = 'SettingsPanel';