import type { PropsWithChildren } from 'react';

export interface Props {
  value: {
    image: {
      data: Uint8Array;
      extension: string;
      filename: string;
    } | null;
    altText: string;
  };
}

export default function ShowableFigureView({
  value: { altText, image },
  children,
}: PropsWithChildren<Props>) {
  return (
    <div
      style={{
        padding: '1rem',
      }}
    >
      <img
        style={{ marginBottom: '0.5rem' }}
        src={image ? URL.createObjectURL(new Blob([image.data])) : undefined}
        alt={altText}
        title={altText}
      />
      {children}
    </div>
  );
}