import { Avatar } from "@mui/material";
import { Couple } from "../api/genealogy/CoupleApi";

export function CouplePhoto(p: {
  couple: Couple;
  width?: number;
}): React.ReactElement {
  return (
    <Avatar
      sx={
        p.width
          ? { width: `${p.width}px`, height: "auto", display: "inline-block" }
          : undefined
      }
      variant="rounded"
      src={p.couple.thumbnailURL ?? undefined}
    />
  );
}