import Image from "next/image";
import type { ImageAsset } from "@/types/content";
import { getImageAlt, getImageUrl } from "@/lib/images";

type ProjectVisualProps = {
  label: string;
  image?: ImageAsset;
  className?: string;
};

export function ProjectVisual({ label, image, className = "" }: ProjectVisualProps) {
  const imageUrl = getImageUrl(image);

  return (
    <div className={`dark-visual ${className}`} role="img" aria-label={label}>
      {imageUrl ? (
        <Image src={imageUrl} alt={getImageAlt(image, label)} fill sizes="(max-width: 768px) 100vw, 520px" className="visual-image" />
      ) : null}
      {!imageUrl ? <span className="visual-label">{label}</span> : null}
    </div>
  );
}
