import { getCurrentWindow } from '@tauri-apps/api/window';
import { Minus, Square, X } from 'lucide-react';

/**
 * Custom title bar for frameless window mode.
 * Provides drag region and window controls.
 */
export default function TitleBar() {
  const appWindow = getCurrentWindow();

  return (
    <div
      data-tauri-drag-region
      className="h-8 flex items-center justify-between bg-gray-900 border-b border-gray-800 select-none"
    >
      {/* App title / drag region */}
      <div
        data-tauri-drag-region
        className="flex-1 h-full flex items-center px-4"
      >
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded bg-gradient-to-br from-synor-400 to-synor-600" />
          <span className="text-xs font-medium text-gray-400">Synor Wallet</span>
        </div>
      </div>

      {/* Window controls (Windows/Linux style) */}
      <div className="flex items-center h-full">
        <button
          onClick={() => appWindow.minimize()}
          className="h-full px-4 hover:bg-gray-800 text-gray-400 hover:text-white transition-colors"
          aria-label="Minimize"
        >
          <Minus size={14} />
        </button>
        <button
          onClick={() => appWindow.toggleMaximize()}
          className="h-full px-4 hover:bg-gray-800 text-gray-400 hover:text-white transition-colors"
          aria-label="Maximize"
        >
          <Square size={12} />
        </button>
        <button
          onClick={() => appWindow.close()}
          className="h-full px-4 hover:bg-red-600 text-gray-400 hover:text-white transition-colors"
          aria-label="Close"
        >
          <X size={14} />
        </button>
      </div>
    </div>
  );
}