"use client";

import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import LendingHeader from "@/components/lending/LendingHeader";
import LendingStats from "@/components/lending/LendingStats";
import LendingPlaceholder from "@/components/lending/LendingPlaceholder";
import BorrowMarket from "@/components/lending/BorrowMarket";
import { useApp } from "@/contexts/AppContext";

export default function LendingPage() {
  const { t } = useApp();
  const breadcrumbItems = [
    { label: "ASSETX", href: "/" },
    { label: t("nav.lending") },
  ];

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 min-w-0 flex flex-col md:ml-[240px] pt-14 md:pt-0">
        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-4 md:px-8 py-3">
          <TopBar breadcrumbItems={breadcrumbItems} />
        </div>

        <div className="flex-1 px-4 md:px-8 py-4 md:py-8 bg-[#F3F4F6] dark:bg-gray-900 flex flex-col gap-4 md:gap-8">

          {/* Market Tab Switcher */}
          <div className="flex gap-1 bg-bg-surface dark:bg-gray-800 border border-border-gray dark:border-gray-700 rounded-2xl p-1 self-start">
            <button
              className="px-5 py-2 rounded-xl text-body-small font-bold bg-foreground text-background shadow-sm"
            >
              USDC Market
            </button>
            <button
              disabled
              className="px-5 py-2 rounded-xl text-body-small font-bold text-text-tertiary dark:text-gray-600 cursor-not-allowed opacity-50"
            >
              USDT Market
            </button>
          </div>

          <LendingHeader market="USDC" />
          <div className="flex flex-col md:grid md:gap-8 md:grid-cols-[760fr_362fr] gap-4">
            <LendingStats />
            <LendingPlaceholder />
          </div>
          <BorrowMarket market="USDC" />
        </div>
      </div>
    </div>
  );
}
