import { Menu, Eye, EyeOff, Save, Sun, Moon, Monitor } from 'lucide-react'
import type { Theme, FileItem } from '../types'

interface HeaderProps {
  theme: Theme
  onThemeChange: (theme: Theme) => void
  currentFile: FileItem | null
  onSave: () => void
  onToggleSidebar: () => void
  onTogglePreview: () => void
  isSidebarOpen: boolean
  isPreviewOpen: boolean
}

export function Header({
  theme,
  onThemeChange,
  currentFile,
  onSave,
  onToggleSidebar,
  onTogglePreview,
  isSidebarOpen,
  isPreviewOpen,
}: HeaderProps) {
  return (
    <header className="h-16 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex items-center justify-between px-4">
      <div className="flex items-center gap-4">
        <button
          onClick={onToggleSidebar}
          className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          title={isSidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
        >
          <Menu className="w-5 h-5" />
        </button>
        <h1 className="text-xl font-bold hidden sm:block">Markdown Editor</h1>
      </div>

      <div className="flex items-center gap-2">
        {currentFile && (
          <span className="text-sm text-gray-500 dark:text-gray-400 mr-2 hidden sm:inline">
            {currentFile.name}.md
          </span>
        )}

        <button
          onClick={onTogglePreview}
          className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          title={isPreviewOpen ? 'Hide preview' : 'Show preview'}
        >
          {isPreviewOpen ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
        </button>

        <button
          onClick={onSave}
          disabled={!currentFile}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <Save className="w-4 h-4" />
          <span className="hidden sm:inline">Save</span>
        </button>

        <div className="flex items-center gap-1 ml-2 border-l border-gray-200 dark:border-gray-700 pl-2">
          <button
            onClick={() => onThemeChange('light')}
            className={`p-2 rounded-lg transition-colors ${
              theme === 'light'
                ? 'bg-gray-200 dark:bg-gray-700'
                : 'hover:bg-gray-100 dark:hover:bg-gray-800'
            }`}
            title="Light theme"
          >
            <Sun className="w-4 h-4" />
          </button>
          <button
            onClick={() => onThemeChange('dark')}
            className={`p-2 rounded-lg transition-colors ${
              theme === 'dark'
                ? 'bg-gray-200 dark:bg-gray-700'
                : 'hover:bg-gray-100 dark:hover:bg-gray-800'
            }`}
            title="Dark theme"
          >
            <Moon className="w-4 h-4" />
          </button>
          <button
            onClick={() => onThemeChange('system')}
            className={`p-2 rounded-lg transition-colors ${
              theme === 'system'
                ? 'bg-gray-200 dark:bg-gray-700'
                : 'hover:bg-gray-100 dark:hover:bg-gray-800'
            }`}
            title="System theme"
          >
            <Monitor className="w-4 h-4" />
          </button>
        </div>
      </div>
    </header>
  )
}
