import type { InsightFeatureCard } from '@/types';

interface FeatureCardBodyProps {
  card: InsightFeatureCard;
  logoClassName?: string;
  numberClassName?: string;
  /** Story index badge (1, 2, 3…). Hidden on listing teasers where it is always 1. */
  showNumber?: boolean;
}

/** White "numbered story" card content used by the masonry, the article slider and recent posts. */
export default function FeatureCardBody({
  card,
  logoClassName = 'img-fluid',
  numberClassName = 'color-white',
  showNumber = true,
}: FeatureCardBodyProps) {
  return (
    <>
      <div className={`d-flex align-items-start mb-4${showNumber ? ' justify-content-between' : ''}`}>
        <img src="/assets/img/insights/insights-CMORoom-logo.png" alt="CMORoom logo" className={logoClassName} />
        {showNumber && (
          <div className="bg-color-golden d-flex align-items-center justify-content-center cmo-square-btn">
            <span className={numberClassName}>{card.number}</span>
          </div>
        )}
      </div>
      <h3 className="text-lg color-black fw-700 mb-3 text-limit-2 lh-1-5">{card.title}</h3>
      <p className="text-sm color-black text-limit-3 mb-4">{card.excerpt}</p>
      {card.source ? (
        <>
          <div className="d-flex align-items-center justify-content-end mb-3">
            <span className="text-xs py-1 px-2 color-white bg-color-golden fw-500">Source: {card.source}</span>
          </div>
          <img src={card.image} alt="Card" className="img-fluid w-100" />
        </>
      ) : (
        <div className="d-flex align-items-center gap-2">
          <span className="text-sm color-golden fw-700 text-uppercase">Read More</span>
          <div className="read-more-line"></div>
        </div>
      )}
    </>
  );
}