import { memo } from "react";
import type { ContentContainerViewProps } from "./ContentContainer.types";

function ContentContainerView({
  post,
  width,
  size,
  iconImage,
  iconAlt,
  showLeadingImage,
  showByline,
  containerClasses,
  contentGapClasses,
  textGapClasses,
  titleClasses,
  descriptionClasses,
  authorClasses,
  dateClasses,
  formattedDate,
}: ContentContainerViewProps) {
  return (
    <div className={containerClasses} style={size === "xs" ? {} : { width }}>
      {/* Content Container - gap between icon and text */}
      <div className={contentGapClasses}>
        {showLeadingImage ? (
          <div className="flex h-[30px] w-[60px] items-center justify-center">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={iconImage}
              alt={iconAlt}
              className="h-[30px] w-[60px] object-contain"
            />
          </div>
        ) : null}

        {/* Text Container */}
        <div className={textGapClasses}>
          {/* Title */}
          <h3 className={titleClasses}>{post.frontmatter.title}</h3>

          {/* Description */}
          <p className={descriptionClasses}>{post.frontmatter.description}</p>
        </div>
      </div>

      {showByline ? (
        <div className="flex min-w-0 items-end gap-[var(--space-200)]">
          <span className={authorClasses}>{post.frontmatter.author}</span>
          <span className={dateClasses}>{formattedDate}</span>
        </div>
      ) : null}
    </div>
  );
}

ContentContainerView.displayName = "ContentContainerView";

export default memo(ContentContainerView);