import { Minus, Square, X, Radio } from 'lucide-react'

export default function TitleBar() {
  const handleMinimize = () => {
    window.electron?.minimize()
  }

  const handleMaximize = () => {
    window.electron?.maximize()
  }

  const handleClose = () => {
    window.electron?.close()
  }

  return (
    <div className="h-10 bg-dark-800 flex items-center justify-between px-4 titlebar-drag border-b border-dark-700">
      {/* App Logo & Title */}
      <div className="flex items-center gap-2 titlebar-no-drag">
        <div className="w-6 h-6 rounded-lg bg-gradient-to-br from-accent-blue to-accent-purple flex items-center justify-center">
          <Radio className="w-4 h-4 text-white" />
        </div>
        <span className="font-display font-semibold text-sm text-dark-100">
          IP Monitor
        </span>
        <span className="text-xs text-dark-400 ml-2">v1.0.0</span>
      </div>

      {/* Window Controls */}
      <div className="flex items-center gap-1 titlebar-no-drag">
        <button
          onClick={handleMinimize}
          className="w-8 h-8 flex items-center justify-center rounded hover:bg-dark-600 transition-colors"
        >
          <Minus className="w-4 h-4 text-dark-300" />
        </button>
        <button
          onClick={handleMaximize}
          className="w-8 h-8 flex items-center justify-center rounded hover:bg-dark-600 transition-colors"
        >
          <Square className="w-3 h-3 text-dark-300" />
        </button>
        <button
          onClick={handleClose}
          className="w-8 h-8 flex items-center justify-center rounded hover:bg-accent-red transition-colors group"
        >
          <X className="w-4 h-4 text-dark-300 group-hover:text-white" />
        </button>
      </div>
    </div>
  )
}

