import React from 'react';
import { ShoppingBag, User, Settings, LogOut, Menu } from 'lucide-react';

const POSHeader = ({ onMenuClick, cartCount, userName }) => {
  return (
    <header className="bg-white border-b border-pos-border sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center gap-4">
            <button 
              onClick={onMenuClick}
              className="p-2 rounded-lg hover:bg-pos-bg transition-colors text-pos-text"
            >
              <Menu className="w-6 h-6" />
            </button>
            <div className="flex items-center gap-2">
              <div className="bg-primary-600 p-2 rounded-lg">
                <ShoppingBag className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-pos-text">SmartPOS</h1>
                <p className="text-xs text-pos-text-secondary">ร้านค้าตัวอย่าง</p>
              </div>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="hidden md:flex items-center gap-2 bg-pos-bg px-4 py-2 rounded-lg">
              <div className="w-3 h-3 bg-success rounded-full animate-pulse"></div>
              <span className="text-sm font-medium text-pos-text">เปิดแคสser</span>
            </div>
            
            <div className="flex items-center gap-3">
              <div className="text-right hidden sm:block">
                <p className="text-sm font-medium text-pos-text">{userName || 'แอดมิน'}</p>
                <p className="text-xs text-pos-text-secondary">ผู้จัดการร้าน</p>
              </div>
              <div className="h-10 w-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600">
                <User className="w-5 h-5" />
              </div>
              <button className="p-2 rounded-lg hover:bg-pos-bg transition-colors text-pos-text">
                <Settings className="w-5 h-5" />
              </button>
              <button className="p-2 rounded-lg hover:bg-danger/10 transition-colors text-danger">
                <LogOut className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default POSHeader;