import {
  Skeleton
} from "./chunk-5H3YPCZK.js";
import {
  Inset
} from "./chunk-XQOL7UBI.js";
import {
  DropdownMenu
} from "./chunk-D4U2MCJG.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  Heading
} from "./chunk-BESTU2AY.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  Typo
} from "./chunk-PMJIFLDT.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Button
} from "./chunk-ZVDAEY5Q.js";
import {
  Card
} from "./chunk-RP2RGCAW.js";
import {
  DotsVerticalIcon
} from "./chunk-R7IT4TCD.js";

// src/app/platform/contents-card.tsx
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var ContentsCard = forwardRef(
  ({
    title,
    description,
    imageSrc,
    footer,
    dropdownItems,
    onClickCard,
    isLoading = false
  }, ref) => {
    return /* @__PURE__ */ jsxs(
      Card,
      {
        onClick: onClickCard,
        ref,
        style: {
          height: "100%",
          width: "100%",
          display: "grid",
          cursor: "pointer",
          maxHeight: "450px"
        },
        children: [
          /* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
            Box,
            {
              height: "210px",
              style: {
                backgroundImage: `url(${imageSrc})`,
                backgroundSize: "cover",
                backgroundPosition: "center"
              },
              width: "100%"
            }
          ) }) }),
          /* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", children: [
            /* @__PURE__ */ jsxs(Box, { children: [
              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
            ] }),
            /* @__PURE__ */ jsxs(
              Grid,
              {
                align: "center",
                columns: "1fr auto",
                justify: "between",
                pt: "2",
                style: { marginTop: "auto" },
                width: "100%",
                children: [
                  /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
                  Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
                    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
                    /* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
                      DropdownMenu.Item,
                      {
                        onClick: (e) => {
                          e.stopPropagation();
                          item.onClick();
                        },
                        children: item.label
                      },
                      item.label
                    )) })
                  ] })
                ]
              }
            )
          ] })
        ]
      }
    );
  }
);
ContentsCard.displayName = "ContentsCard";

export {
  ContentsCard
};
//# sourceMappingURL=chunk-65ZUDFPR.js.map