type GuideScreenshotSize = 'wide' | 'narrow';

interface GuideScreenshotProps {
  src: string;
  alt: string;
  caption?: string;
  mobile?: boolean;
  size?: GuideScreenshotSize;
}

const SIZE_CLASS: Record<GuideScreenshotSize, string> = {
  wide: 'max-w-4xl',
  narrow: 'max-w-lg',
};

export const GuideScreenshot = ({ src, alt, caption, mobile, size = 'wide' }: GuideScreenshotProps) => {
  const widthClass = mobile ? 'max-w-[375px]' : SIZE_CLASS[size];
  return (
    <figure className={`my-6 ${widthClass} mx-auto`}>
      <div className="rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-black/20">
        <img
          src={src}
          alt={alt}
          loading="lazy"
          className="max-w-full h-auto"
        />
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-titanio/70 italic">
          {caption}
        </figcaption>
      )}
    </figure>
  );
};