export interface XeblogConvProps {
  name: string;
  mood: string;
  title?: string;
  children: HTMLElement[];
  standalone?: boolean;
  aiModel?: string;
}

const ConvSnippet = ({
  name,
  mood,
  children,
  title,
  standalone,
  aiModel,
}: XeblogConvProps) => {
  const nameLower = name.toLowerCase();
  name = name.replace(" ", "_");

  return (
    <div
      className={`flex space-x-2 bg-bg-soft dark:bg-bgDark-soft mx-auto min-h-fit
      lg:w-[80ch] sm:w-[65ch] w-full
      lg:p-4 p-2
      // Base styles for all messages
      mt-0 mb-0 rounded-none
      // First message styles
      first:mt-4 first:rounded-t-lg first:pb-2
      // Last message styles
      last:mb-4 last:rounded-b-lg last:pt-1
      // Middle message top/bottom adjustment
      [&:not(:first-child)]:-mt-[1px] [&:not(:first-child)]:py-1`}
    >
      {/* Avatar Container */}
      <div className="h-16 not-prose">
        <img
          className="h-16 w-16 rounded-xs"
          alt={`${name} is ${mood}`}
          loading="lazy"
          src={`https://stickers.xeiaso.net/sticker/${nameLower}/${mood}`}
        />
      </div>

      {/* Message Content */}
      <div className="flex-1 min-w-0">
        {/* Username */}
        <span className="font-semibold text-sm block mb-1">
          <a href={`/characters#${nameLower}`}>{name}</a>
          {!!title && (
            <>
              {" ("}
              {title}
              {")"}
            </>
          )}
        </span>
        <span className="mx-auto" />

        {/* Message Body */}
        <div className="text-fg-1 dark:text-fgDark-1 text-sm prose-p:my-2">
          {children}
        </div>

        {/* AI Model Footer */}
        {aiModel && (
          <div>
            <span className="pt-2 text-xs text-[#a3a6aa]">
              Generated by {aiModel}
            </span>
          </div>
        )}
      </div>
    </div>
  );
};

export default ConvSnippet;