import type { ReactNode } from 'react';
import React, { useMemo } from 'react';

/**
 * `href` only makes sense once there's an image to link — with no `src`, `href` would be ignored at runtime.
 * Model this in the props: `href` is only allowed when `src` is provided (otherwise it must be `undefined`).
 */
type PerexBoxLinkedImageProps = {
  href: string;
  src: string;
};

type PerexBoxUnlinkedProps = {
  href?: undefined;
  src?: string;
};

export type PerexBoxProps = {
  children: ReactNode;
  /**
   * Optional alt text for the image.
   */
  alt?: string;
} & (PerexBoxLinkedImageProps | PerexBoxUnlinkedProps);

export const PerexBox: React.FC<PerexBoxProps> = ({ alt, children, href, src, ...rest }) => {
  const imgElement = useMemo(() => <img src={src} alt={alt ?? 'Logo'} />, [alt, src]);

  return (
    <div {...rest} className='perexBox'>
      <div className='perexBox__content'>{children}</div>
      {src && <div className='perexBox__image'>{href ? <a href={href}>{imgElement}</a> : imgElement}</div>}
    </div>
  );
};