ruccan/components/layout/Header.tsx

'use client'

import { useState } from 'react'
import { MenuOutlined } from '@ant-design/icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faBell } from '@fortawesome/free-solid-svg-icons'
import { Button, Space } from 'antd'
import Sidebar from '@/components/layout/Sidebar'
import BellNotification from '@/components/ui/BellNotification'

const Header = () => {
  const [showSideBar, setShowSideBar] = useState(false)

  return (
    <header className="flex items-center px-4 py-2 relative z-40 bg-white shadow-sm">
      {/* Sidebar Trigger */}
      <Button
        type="text"
        icon={<FontAwesomeIcon icon={faBars} />}
        onClick={() => setShowSideBar(true)}
        className="text-lg text-gray-700"
      />

      {/* Sidebar Component */}
      <Sidebar open={showSideBar} setOpen={setShowSideBar} />

      {/* Logo + Brand */}
      <div className="flex items-center ms-3">
        <img src="/ruccan_logo.png" alt="Ruccan Logo" className="h-6 w-auto" />
        <span className="text-black font-bold text-lg ms-3">Ruccan.com</span>
      </div>

      {/* Notification Bell */}
      <div className="ms-auto">
        <BellNotification />
      </div>
    </header>
  )
}

export default Header