import './editorial-card.css';

export type EditorialCardProps = {
  category: string;
  title: string;
  summary?: string;
  href: string;
  image?: { src: string; alt: string };
  actionLabel?: string;
  headingLevel?: 2 | 3;
  className?: string;
};

/** Brand identity is supplied by tokens on an ancestor [data-publication]. */
export function EditorialCard({
  category, title, summary, href, image,
  actionLabel = 'Read story', headingLevel = 3, className = ''
}: EditorialCardProps) {
  const Heading = `h${headingLevel}` as 'h2' | 'h3';
  return (
    <article className={`editorial-card ${className}`.trim()}>
      {image && <img className="editorial-card__image" src={image.src} alt={image.alt} />}
      <div className="editorial-card__content">
        <span className="editorial-card__category">{category}</span>
        <Heading className="editorial-card__title">
          <a className="editorial-card__link" href={href}>{title}</a>
        </Heading>
        {summary && <p className="editorial-card__summary">{summary}</p>}
        <span className="editorial-card__action" aria-hidden="true">{actionLabel}</span>
      </div>
    </article>
  );
}