import type { Insight } from '@/types';
import { routes } from '@/lib/routes';
import FeatureCardBody from './FeatureCardBody';
import InsightNavLink from './InsightNavLink';

export default function InsightMasonryItem({ insight }: { insight: Insight }) {
  const { feature } = insight;

  return (
    <InsightNavLink href={routes.insight(insight.slug)} className="insights-masonry-item text-decoration-none" data-categories={insight.categories.join(',')}>
      {feature && (
        <div className="insight-card-type-1 text-decoration-none d-block bg-color-white overflow-hidden w-100 shadow-sm">
          <div className="p-4 position-relative">
            <FeatureCardBody card={feature} showNumber={false} />
          </div>
          {/* No-source feature cards put the image below the white body (design insights.php). */}
          {!feature.source && (
            <img src={feature.image} alt="" className="img-fluid w-100 img-cover insight-card-img" />
          )}
        </div>
      )}
      <div className="insight-card-type-2 text-decoration-none d-block w-100">
        {/* Type-2 image only when this item is not a feature+teaser stack — otherwise it duplicates feature.image. */}
        {!feature && insight.image ? (
          <div className="card-img-wrapper overflow-hidden mb-3">
            <img src={insight.image} alt="" className="img-fluid w-100 img-cover insight-card-img" />
          </div>
        ) : null}
        <div className="d-flex justify-content-between align-items-center mb-2 px-1">
          <p className="text-sm color-content m-0">
            {insight.date} &bull; {insight.readTime}
          </p>
        </div>
        <p className="text-xs color-white fw-400 text-uppercase mb-2 ls-1 px-1">{insight.categoryLabel}</p>
        <h3 className="text-lg color-white fw-600 mb-3 text-limit-2 lh-1-5 px-1">{insight.title}</h3>
        <p className="text-md color-content text-limit-3 m-0 px-1">{insight.excerpt}</p>
      </div>
    </InsightNavLink>
  );
}