import { jsx, jsxs } from "react/jsx-runtime";
import { Avatar, Box, Stack, Typography } from "@mui/material";
export default function ProductCard({
  size = 48,
  variant = "rounded",
  name,
  logo = "",
  description = "",
  extra = void 0
}) {
  const s = { width: size, height: size };
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      direction: "row",
      spacing: 1,
      sx: {
        alignItems: "center",
        flex: 2,
        width: "100%"
      },
      children: [
        logo ? (
          // @ts-ignore
          /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
        ) : (
          // @ts-ignore
          /* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: (name || "?").slice(0, 1) })
        ),
        /* @__PURE__ */ jsxs(
          Stack,
          {
            direction: "column",
            sx: {
              alignItems: "flex-start",
              justifyContent: "space-around",
              flexShrink: 1,
              overflow: "hidden"
            },
            children: [
              /* @__PURE__ */ jsx(
                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__ */ jsx(
                Typography,
                {
                  variant: "body1",
                  title: description,
                  sx: {
                    color: "text.lighter",
                    fontSize: "0.74375rem",
                    mb: 0.5,
                    lineHeight: 1.2,
                    textAlign: "left"
                  },
                  children: description
                }
              ),
              extra && /* @__PURE__ */ jsx(
                Box,
                {
                  sx: {
                    color: "text.lighter",
                    fontSize: "0.74375rem"
                  },
                  children: extra
                }
              )
            ]
          }
        )
      ]
    }
  );
}
