import React from "react";
import { IoGrid, IoList } from "react-icons/io5";

export default function StarTopBar({
  viewMode,
  setViewMode,
  selectedFolderName,
  foldersCount,
  filesCount,
}) {
  return (
    <div className="mb-5 rounded-2xl border border-black/10 dark:border-white/10 bg-[#A1E3F919] shadow p-3 sm:p-4">
      <div className="flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between min-w-0">
        <div className="min-w-0">
          <h1 className="text-lg sm:text-xl font-extrabold">ستاره‌دارها</h1>
          <p className="text-xs sm:text-sm text-black/60 dark:text-white/70 truncate">
            {selectedFolderName ? `نمایش آیتم‌های داخل: ${selectedFolderName}` : "پوشه‌های ستاره‌دار + فایل‌های ستاره‌دار"}
          </p>
        </div>

        <div className="flex items-center gap-2 w-full lg:w-auto">
          <div className="flex-1 lg:flex-none text-xs px-3 py-2 rounded-xl border border-black/10 dark:border-white/10 bg-white/70 dark:bg-white/10 shadow text-black/60 dark:text-white/70">
            پوشه‌ها: <b className="text-black dark:text-white">{foldersCount}</b> • فایل‌ها:{" "}
            <b className="text-black dark:text-white">{filesCount}</b>
          </div>

          <button
            onClick={() => setViewMode("grid")}
            className={`flex-1 lg:flex-none border rounded-xl px-3 py-2 inline-flex items-center justify-center gap-2 transition
              ${
                viewMode === "grid"
                  ? "dark:bg-[#A1E3F919] bg-[#A1E3F980] dark:text-[#43BEFF] shadow text-black border-[#A1E3F919]"
                  : "border-[#A1E3F919] hover:bg-black/5 dark:text-white text-[#43BEFF] dark:hover:bg-white/10"
              }`}
          >
            <IoGrid className="h-5 w-5" />
            <span className="text-sm">گرید</span>
          </button>

          <button
            onClick={() => setViewMode("list")}
            className={`flex-1 lg:flex-none border rounded-xl px-3 py-2 inline-flex items-center justify-center gap-2 transition
              ${
                viewMode === "list"
                  ? "dark:bg-[#A1E3F919] bg-[#A1E3F980] dark:text-[#43BEFF] shadow text-black border-[#A1E3F919]"
                  : "border-[#A1E3F919] hover:bg-black/5 dark:text-white text-[#43BEFF] dark:hover:bg-white/10"
              }`}
          >
            <IoList className="h-5 w-5" />
            <span className="text-sm">لیست</span>
          </button>
        </div>
      </div>
    </div>
  );
}
