import MediaImage from "./MediaImage";

/**
 * `<x-project-card>`.
 *
 * Two children, exactly as the design has it: the image link carries the aspect
 * ratio, the overflow clip and the gradient scrim, and the content is an
 * absolutely-positioned overlay on top of it. Flattening these into one anchor
 * stacks the caption under the image and leaves the hover zoom nothing to clip
 * against.
 *
 * The facts are the first five curated portfolio rows verbatim — production
 * prints these rather than a generic location/type/status summary, which
 * silently dropped the description and completion rate.
 */
export default function ProjectCard({ project }: { project: any }) {
  return (
    <article className="project-card project-list-card">
      <a className="project-card__image" href={project.url ?? undefined}>
        <MediaImage image={project.image} alt={project.title} />
      </a>

      <div className="project-card__content">
        <h3>
          <a href={project.url ?? undefined}>{project.title}</a>
        </h3>

        {project.facts?.length ? (
          <ul className="project-data">
            {project.facts.map((fact: any, index: number) => (
              <li key={index}>
                <b>{fact.label}:</b>
                <span>
                  {fact.url ? (
                    <a href={fact.url} target="_blank" rel="noopener noreferrer">
                      {fact.value}
                    </a>
                  ) : (
                    fact.value
                  )}
                </span>
              </li>
            ))}
          </ul>
        ) : null}
      </div>
    </article>
  );
}