'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import '../../fd-component-toolbox/client/framework/index.js';
import { fallbackAvatarSrc } from '../../fd-component-toolbox/avatar/Avatar.js';
import FrameworkImage from 'next/image.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function CommentComponent({
  body,
  userImageUrl,
  userName
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "flex gap-4",
    children: [/* @__PURE__ */jsx(FrameworkImage, {
      src: userImageUrl ?? fallbackAvatarSrc,
      alt: "User image",
      className: "bg-muted size-8 rounded-full",
      width: 32,
      height: 32
    }), /* @__PURE__ */jsxs("div", {
      className: "bg-muted flex w-fit flex-col gap-1 rounded-md px-3 py-2",
      children: [/* @__PURE__ */jsx("div", {
        className: "text-muted-foreground text-sm font-semibold",
        children: userName
      }), /* @__PURE__ */jsx("div", {
        children: body
      })]
    })]
  });
}
__name(CommentComponent, "CommentComponent");

export { CommentComponent };
