import React from "react";
import logo from "../assets/tms-erp-logo.png";
import Image from "next/image";
import Link from "next/link";

interface NavbarProps {
  toggleRightSidePage: () => void;
  isShow: boolean;
}

const Navbar: React.FC<NavbarProps> = ({ toggleRightSidePage, isShow }) => {
  return (
    <div className="navbar bg-primary text-primary-content">
      <div className="navbar-start h-12">
        <Link href={"/"}>
          <Image
            src={logo}
            width={150} // Ölçüleri ihtiyaca göre ayarlayın
            alt="TMS ERP logo"
            className=" mb-2 p-0"
          />
        </Link>
      </div>
      <div className="navbar-end">
        <Link href="/login" className="btn btn-sm btn-info">
          <p className="text-white">Çıkış Yap</p>
        </Link>
        { isShow && <button className="btn btn-circle ml-3"
        onClick={toggleRightSidePage}>
          
          <div className="indicator">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
            <span className="badge badge-xs badge-error indicator-item"></span>
          </div>
        </button>}
      </div>
    </div>
  );
};

export default Navbar;