import Image from "next/image";
import Breadcrumb from "./Breadcrumb";
import LanguageSwitch from "./LanguageSwitch";
import ThemeSwitch from "./ThemeSwitch";

export default function TopBar() {
  const breadcrumbItems = [
    { label: "ASSETX" },
    { label: "Product" },
    { label: "Detail" },
  ];

  return (
    <div className="flex items-center justify-between w-full">
      {/* Left: Breadcrumb */}
      <div className="flex items-center gap-2">
        <Breadcrumb items={breadcrumbItems} />
      </div>

      {/* Right: Actions */}
      <div className="flex items-center gap-4">
        {/* Language Switch */}
        <LanguageSwitch />

        {/* Theme Switch */}
        <ThemeSwitch />

        {/* Wallet Button */}
        <button className="bg-bg-surface rounded-lg border border-border-normal px-2 py-2 flex items-center justify-center h-10">
          <Image src="/icon-wallet.svg" alt="Wallet" width={20} height={20} />
          <Image
            src="/icon-notification.svg"
            alt="Notification"
            width={14}
            height={14}
            className="ml-1"
          />
        </button>

        {/* Address Button */}
        <button className="bg-text-primary rounded-lg px-4 py-2 flex items-center justify-center gap-2 h-10 hover:bg-gray-800 transition-colors">
          <Image src="/icon-copy.svg" alt="Copy" width={16} height={16} />
          <span className="text-white text-sm font-bold font-jetbrains">
            0x12...4F82
          </span>
        </button>
      </div>
    </div>
  );
}