import React from 'react';
import { Form } from '@remix-run/react';

interface HeaderProps {
  username: string;
}

export function Header({ username }: HeaderProps) {
  return (
    <header className="bg-white shadow-sm py-3 px-6 flex justify-between items-center">
      <div className="flex items-center">
        <div className="relative">
          <input 
            type="text" 
            placeholder="搜索..." 
            className="form-input pl-9 pr-3 py-1.5 w-64"
          />
          <i className="ri-search-line absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
      </div>
      
      <div className="flex items-center space-x-4">
        <div className="relative">
          <button className="flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100">
            <i className="ri-notification-3-line text-xl text-gray-600"></i>
            <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-xs flex items-center justify-center rounded-full">3</span>
          </button>
        </div>
        
        <div className="relative group">
          <button className="flex items-center space-x-2 focus:outline-none">
            <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-medium">
              {username.charAt(0)}
            </div>
            <span className="text-sm font-medium">{username}</span>
            <i className="ri-arrow-down-s-line text-gray-400"></i>
          </button>
          
          <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white hidden group-hover:block z-10">
            <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i className="ri-user-line mr-2"></i> 个人资料
            </a>
            <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i className="ri-settings-3-line mr-2"></i> 账号设置
            </a>
            <Form action="/auth/logout" method="post">
              <button 
                type="submit" 
                className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
              >
                <i className="ri-logout-box-line mr-2"></i> 退出登录
              </button>
            </Form>
          </div>
        </div>
      </div>
    </header>
  );
}