"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

// 브레드크럼 컴포넌트 렌더러
const BreadcrumbRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    items = [{ label: "홈", href: "/" }, { label: "관리자", href: "/admin" }, { label: "현재 페이지" }],
    separator = "/",
    style = {},
  } = config;

  return (
    <div className="flex h-full w-full items-center p-2" style={style}>
      <Breadcrumb>
        <BreadcrumbList>
          {items.map((item: any, index: number) => (
            <React.Fragment key={index}>
              <BreadcrumbItem>
                {index === items.length - 1 ? (
                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
                ) : (
                  <BreadcrumbLink href={item.href || "#"} className="pointer-events-none">
                    {item.label}
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
              {index < items.length - 1 && <BreadcrumbSeparator />}
            </React.Fragment>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("breadcrumb", BreadcrumbRenderer);

export { BreadcrumbRenderer };