import { MUTE, FONT_MONO } from "../theme";
import Photo from "./Photo";

/*
 * Scheef "geplakte" foto met bijschrift. Het bijschrift is de beschrijving die de afzender bij de
 * foto heeft getypt — dezelfde tekst dient als alt-tekst, want ze zeggen hetzelfde: wat er te zien is.
 * `caption` overschrijft dat (de schrijfdialoog toont daar het eigen invulveld).
 */
export default function PhotoFrame({ photo = null, src = null, alt = "", caption, width = "70%", marginBottom = 0 }) {
  const text = caption !== undefined ? caption : (alt || photo?.alt || "");
  return (
    <figure
      style={{
        margin: `0 0 ${marginBottom}px`, padding: 8, background: "#fff", border: `1px solid ${MUTE}`,
        transform: "rotate(-1.5deg)", width, boxShadow: "2px 2px 0 rgba(31,44,85,0.15)",
      }}
    >
      <Photo photo={photo} src={src} alt={alt} />
      {text && (
        <figcaption style={{ fontFamily: FONT_MONO, fontSize: 10, color: MUTE, paddingTop: 6 }}>
          {text}
        </figcaption>
      )}
    </figure>
  );
}