---
/**
 * Card — a square picture with a title and a meta line; the whole card is one link.
 * href: where the card goes; without it the card is a <div> sample.
 * title, meta: the caption. chips: short tags over the picture, such as platforms.
 * chipsLabel: names the tag list for screen readers.
 * image: { src, alt, width?, height? } — square; 1600 × 1600 if not given.
 * actionLabel: the title's hover text. state: 'hover' forces the hover state, for documentation.
 * class: extra classes. root: prefix for href and image.src; '/' on pages in a folder.
 * …attributes: passed to the element, such as data-project.
 */
interface Props {
  href?: string; title: string; meta: string; chips?: string[]; chipsLabel?: string;
  image: { src: string; alt: string; width?: number; height?: number };
  actionLabel?: string; state?: 'hover'; class?: string; root?: string;
  [attr: string]: any;
}
const { href, title, meta, chips = [], chipsLabel = 'Platforms', image, actionLabel = 'View project', state, class: extra, root = '', ...attrs } = Astro.props;
const Tag = href ? 'a' : 'div';
const Title = href ? 'h3' : 'p';
---
<Tag class:list={[extra, 'project-card', state && `is-${state}`]} href={href ? `${root}${href}` : undefined} {...attrs}>
  <span class="project-card-media"><img src={`${root}${image.src}`} alt={image.alt} loading="lazy" decoding="async" width={image.width ?? 1600} height={image.height ?? 1600}></span>
  {chips.length > 0 && <ul class="project-card-tags" aria-label={chipsLabel}>{chips.map((t) => <li>{t}</li>)}</ul>}{'\n  '}
  <span class="project-card-text">
    <Title class="project-card-title"><span>{title}</span><span aria-hidden="true">{actionLabel}</span></Title>
    <span class="project-card-meta">{meta}</span>
  </span>
  <span class="project-card-go" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg></span>
</Tag>