interface FullPageImageProps {
  src: string;
  alt: string;
  credit?: string;
  isFixed?: boolean;
}

export default function FullPageImage({ src, alt, credit, isFixed = false }: FullPageImageProps) {
  const containerStyle = isFixed
    ? {height: "100vh", overflow: "hidden", width: "100vw", position: "fixed" as const, top: 0, left: 0, zIndex: 0}
    : {height: "100vh", overflow: "hidden", width: "100vw", position: "relative" as const, left: "50%", right: "50%", marginLeft: "-50vw", marginRight: "-50vw"};

  return (
    <div style={containerStyle}>
      <img src={src} alt={alt} style={{width: "100%", height: "100%", objectFit: "cover"}} />
      {credit && (
        <div style={{position: "absolute", bottom: "20px", right: "20px", color: "white", fontFamily: "roboto, sans-serif", fontSize: "14px", backgroundColor: "rgba(0, 0, 0, 0.5)", padding: "8px 12px", borderRadius: "4px"}}>
          Credit: {credit}
        </div>
      )}
    </div>
  );
}