// src/components/Layout/Header.js
import React from "react";
import { FaBell, FaUserCircle } from "react-icons/fa";

const Header = ({ toggleSidebar }) => {
  return (
    <header className="bg-white shadow-md px-6 py-4 flex justify-between items-center">
      <div className="flex items-center gap-4">
        <button
          onClick={toggleSidebar}
          className="p-2 hover:bg-gray-100 rounded-lg transition md:hidden"
        >
          ☰
        </button>
        <h2 className="text-xl font-bold text-gray-800">پنل مدیریت</h2>
      </div>

      <div className="flex items-center gap-4">
        <button className="relative p-2 hover:bg-gray-100 rounded-lg transition">
          <FaBell className="text-gray-600" />
          <span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
        </button>

        <div className="flex items-center gap-2">
          <FaUserCircle className="text-gray-600 text-2xl" />
          <span className="text-gray-700">مدیر سیستم</span>
        </div>
      </div>
    </header>
  );
};

export default Header;