import Link from "next/link";

/** Hai danh sách của mục Khách hàng: khách hàng đang theo dõi và khách tiềm năng (dữ liệu từ Marketing, chưa chuyển thành khách). */
export function CustomerTabs({ active }: { active: "khach-hang" | "tiem-nang" }) {
  const items = [
    { key: "khach-hang", label: "Khách hàng", href: "/khach-hang" },
    { key: "tiem-nang", label: "Khách tiềm năng", href: "/khach-hang/tiem-nang" },
  ] as const;
  return (
    <div className="mb-4 flex gap-1 rounded-lg border border-[var(--color-line)] bg-white p-1 sm:w-fit">
      {items.map((item) => (
        <Link
          key={item.key}
          href={item.href}
          aria-current={active === item.key ? "page" : undefined}
          className={`flex-1 rounded-md px-4 py-1.5 text-center text-sm font-semibold sm:flex-none ${
            active === item.key ? "bg-brand-500 text-white" : "text-ink-500 hover:bg-ink-50"
          }`}
        >
          {item.label}
        </Link>
      ))}
    </div>
  );
}