import React from 'react';

import { Img } from './Img';

export interface Props {
  desktopSrc: string;
  mobileSrc: string;
  onLoad?(): void;
  onError?(): void;
}

export const Picture: React.FC<Props> = ({
  desktopSrc,
  mobileSrc,
  onLoad,
  onError,
}) => {
  if (!mobileSrc && desktopSrc) {
    return (
      <picture className="hidden-mobile">
        <source srcSet={desktopSrc} media="(max-width: 900px)" />
        <Img src={desktopSrc} onLoad={onLoad} onError={onError} />
      </picture>
    );
  }

  if (mobileSrc && !desktopSrc) {
    return (
      <picture className="hidden-desktop">
        <source srcSet={mobileSrc} media="(min-width: 901px)" />
        <Img src={mobileSrc} onLoad={onLoad} onError={onError} />
      </picture>
    );
  }

  if (mobileSrc && desktopSrc) {
    return (
      <picture>
        <source srcSet={desktopSrc} media="(min-width: 901px)" />
        <source srcSet={mobileSrc} media="(max-width: 900px)" />
        <Img src={desktopSrc} onLoad={onLoad} onError={onError} />
      </picture>
    );
  }

  return null;
};