import {
  Skeleton
} from "./chunk-5H3YPCZK.js";
import {
  DropdownMenu
} from "./chunk-4WFMOFN2.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  Heading
} from "./chunk-HJB3AASV.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  Typo
} from "./chunk-52MVZ6AN.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Button
} from "./chunk-Q5AFRGVP.js";
import {
  DotsVerticalIcon
} from "./chunk-HLFG5ZTU.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(
      Flex,
      {
        className: "hover-shadow",
        direction: "column",
        height: "100%",
        m: "0",
        onClick: onClickCard,
        ref,
        style: {
          backgroundColor: "var(--color-panel)",
          borderRadius: "var(--radius-5)",
          overflow: "hidden",
          cursor: "pointer"
        },
        width: "100%",
        children: [
          /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
            Box,
            {
              height: "210px",
              style: {
                borderTopLeftRadius: "var(--radius-4)",
                borderTopRightRadius: "var(--radius-4)",
                backgroundImage: `url(${imageSrc})`,
                backgroundSize: "cover",
                backgroundPosition: "center"
              },
              width: "100%"
            }
          ) }),
          /* @__PURE__ */ jsxs(Box, { p: "5", 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",
                py: "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-7CANQHBM.js.map