import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Breadcrumb } from "../../../components/ui/breadcrumb";

export default function BreadcrumbPage() {
  return (
    <>
      <PageMeta
        title="React.js Breadcrumb Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Breadcrumb Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Default Breadcrumb">
          <Breadcrumb
            items={[
              { label: "Home", path: "/" },
              { label: "UI Elements", path: "/ui-elements" },
              { label: "Breadcrumb" },
            ]}
          />
        </ComponentCard>

        <ComponentCard title="Breadcrumb with Icon">
          <Breadcrumb
            items={[
              {
                label: "Home",
                path: "/",
                icon: (
                  <svg
                    className="w-4 h-4"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                ),
              },
              { label: "UI Elements", path: "/ui-elements" },
              { label: "Breadcrumb" },
            ]}
          />
        </ComponentCard>
      </div>
    </>
  );
}

