import { classNames } from '@/lib/components/classNames';
import Image, { type ImageProps } from 'next/image';
import type { ReactNode } from 'react';
import styles from './MediaFrame.module.css';

export type MediaRatio = 'square' | 'landscape' | 'wide' | 'portrait' | 'auto';

interface MediaFrameProps {
  ratio?: MediaRatio;
  children: ReactNode;
  caption?: string;
  decorative?: boolean;
  className?: string;
}

export function MediaFrame({
  ratio = 'landscape',
  children,
  caption,
  decorative = false,
  className,
}: MediaFrameProps) {
  return (
    <figure className={classNames(styles.figure, className)} aria-hidden={decorative || undefined}>
      <div className={classNames(styles.frame, styles[ratio])}>{children}</div>
      {caption ? <figcaption>{caption}</figcaption> : null}
    </figure>
  );
}

interface ResponsiveImageProps extends Omit<ImageProps, 'fill'> {
  ratio?: MediaRatio;
  caption?: string;
}

export function ResponsiveImage({
  ratio = 'landscape',
  caption,
  alt,
  ...props
}: ResponsiveImageProps) {
  return (
    <MediaFrame ratio={ratio} decorative={alt === ''} {...(caption ? { caption } : {})}>
      <Image alt={alt} {...props} className={classNames(styles.image, props.className)} />
    </MediaFrame>
  );
}
