"use client";

import React from "react";
import Link from "next/link";
import { AiOutlineHome, AiOutlineShoppingCart } from "react-icons/ai";
import { FiUser } from "react-icons/fi";
import { usePathname } from "next/navigation";

export default function TabLayout({ children }) {
  const pathname = usePathname();

  const getLinkStyle = (path) => {
    const isActive = pathname === path;
    return `flex flex-col items-center ${
      isActive ? "text-yellow-500" : "text-gray-500"
    }`;
  };

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-auto">{children}</div>

      <nav
        className="flex items-center justify-around py-2 bg-white border-t border-gray-200"
        style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
      >
        <Link href="/tab" className={getLinkStyle("/tab")}>
          <AiOutlineHome className="w-6 h-6" />
          <span className="text-xs mt-1">首页</span>
        </Link>

        <Link href="/tab/cart" className={getLinkStyle("/tab/cart")}>
          <AiOutlineShoppingCart className="w-6 h-6" />
          <span className="text-xs mt-1">购物车</span>
        </Link>

        <Link href="/tab/profile" className={getLinkStyle("/tab/profile")}>
          <FiUser className="w-6 h-6" />
          <span className="text-xs mt-1">我的</span>
        </Link>
      </nav>
    </div>
  );
}