import './Header.css';

interface HeaderProps {
  title: string;
}

export default function Header({ title }: HeaderProps) {
  return (
    <header className="header" style={{ '--wails-draggable': 'drag' } as any}>
      <h2 className="header-title">{title}</h2>

      <div className="header-actions" style={{ '--wails-draggable': 'no-drag' } as any}>
        <button className="header-btn" title="通知">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
          </svg>
        </button>
        <button className="header-btn" title="截图">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
            <line x1="8" y1="21" x2="16" y2="21"/>
            <line x1="12" y1="17" x2="12" y2="21"/>
          </svg>
        </button>

        <div className="header-divider" />

        <div className="header-user">
          <span className="user-name">运行中</span>
          <div className="user-avatar">
            <div className="avatar-circle">B</div>
            <span className="status-dot online" />
          </div>
        </div>
      </div>
    </header>
  );
}
