'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import { StatusBoardItemComponent } from '../status-board-item/StatusBoardItem.js';
import { Draggable } from '../../../fd-component-toolbox/drag-and-drop/Draggable.js';
import Droppable from '../../../fd-component-toolbox/drag-and-drop/Droppable.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function StatusBoardStatusComponent({
  name,
  droppableId,
  statusBoardItemList
}) {
  const renderDraggableItem = /* @__PURE__ */__name(item => /* @__PURE__ */jsx(Draggable, {
    draggableId: item.id,
    children: /* @__PURE__ */jsx(StatusBoardItemComponent, {
      item
    })
  }, item.id), "renderDraggableItem");
  return /* @__PURE__ */jsx(Droppable, {
    droppableId,
    children: /* @__PURE__ */jsxs("div", {
      className: "bg-muted group relative h-[calc(100vh-7.5rem)] w-80 rounded-lg transition-all duration-300",
      children: [/* @__PURE__ */jsxs("div", {
        className: "bg-muted relative z-10 flex items-center justify-between p-4",
        children: [/* @__PURE__ */jsxs("p", {
          className: "text-foreground flex items-center text-sm font-semibold",
          children: [/* @__PURE__ */jsx("span", {
            className: "bg-fd-accent mr-2 size-3 rounded-full"
          }), name]
        }), /* @__PURE__ */jsx("span", {
          className: "bg-foreground/10 text-foreground rounded-full px-2 py-1 text-xs font-semibold",
          children: statusBoardItemList.length
        })]
      }), /* @__PURE__ */jsx("div", {
        className: "bg-muted h-[calc(100vh-12.5rem)] space-y-1 overflow-y-auto px-4 py-2",
        children: statusBoardItemList.length > 0 ? statusBoardItemList.map(renderDraggableItem) : /* @__PURE__ */jsx("div", {
          className: "flex h-full items-center justify-center",
          children: /* @__PURE__ */jsx("p", {
            className: "text-foreground/50 text-center",
            children: "No items available"
          })
        })
      })]
    })
  });
}
__name(StatusBoardStatusComponent, "StatusBoardStatusComponent");

export { StatusBoardStatusComponent };
