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

export const GuideScreenshot = ({ src, alt, caption, mobile }: GuideScreenshotProps) => {
  return (
    <figure className={`my-6 ${mobile ? 'max-w-[375px]' : 'max-w-4xl'} 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="w-full h-auto"
        />
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-titanio/70 italic">
          {caption}
        </figcaption>
      )}
    </figure>
  );
};