"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = ProductCard;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
function ProductCard({
  size = 48,
  variant = "rounded",
  name,
  logo = "",
  description = "",
  extra = void 0
}) {
  const s = {
    width: size,
    height: size
  };
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    direction: "row",
    spacing: 1,
    sx: {
      alignItems: "center",
      flex: 2,
      width: "100%"
    },
    children: [logo ?
    // @ts-ignore
    /* @__PURE__ */
    (0, _jsxRuntime.jsx)(_material.Avatar, {
      src: logo,
      alt: name,
      variant,
      sx: s
    }) :
    // @ts-ignore
    /* @__PURE__ */
    (0, _jsxRuntime.jsx)(_material.Avatar, {
      variant,
      sx: s,
      children: (name || "?").slice(0, 1)
    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "column",
      sx: {
        alignItems: "flex-start",
        justifyContent: "space-around",
        flexShrink: 1,
        overflow: "hidden"
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        className: "cko-ellipsis",
        variant: "body1",
        title: name,
        sx: {
          color: "text.primary",
          fontWeight: 500,
          mb: 0.5,
          lineHeight: 1.2,
          fontSize: 16
        },
        children: name
      }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "body1",
        title: description,
        sx: {
          color: "text.lighter",
          fontSize: "0.74375rem",
          mb: 0.5,
          lineHeight: 1.2,
          textAlign: "left"
        },
        children: description
      }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          color: "text.lighter",
          fontSize: "0.74375rem"
        },
        children: extra
      })]
    })]
  });
}