import { House, Layers } from "lucide-react";
import { Link } from "react-router-dom";
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import UnitLibraryTable from "../../../components/library/UnitLibraryTable";
import { PageMeta } from "@/contexts/MetadataContext";

export default function UnitLibraryList() {
  const items = [
    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
    { label: "Units" },
  ];

  return (
    <section className="bg-muted h-full">
      <PageMeta title="Units Library - STARR" description="Manage standalone units — attach them to any course." />
      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
        <div className="flex flex-col gap-2 my-6">
          <AppBreadcrumb items={items} />
        </div>
        <div className="w-full space-y-4">
          <div className="flex items-start gap-3 rounded-lg border bg-card p-4 text-sm">
            <Layers className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
            <p className="text-muted-foreground">
              Units run <span className="font-medium text-foreground">independently</span> — build them here once,
              then attach them to any number of{" "}
              <Link to="/admin/courses" className="text-primary hover:underline font-medium">
                Courses
              </Link>
              . Removing a unit from a course only detaches it; the unit stays in this library.
            </p>
          </div>
          <UnitLibraryTable />
        </div>
      </div>
    </section>
  );
}