import cx from "classnames";
import React from "react";

import { Image } from "../Image";

interface CoverProps {
  /** Background image source. URL string or an object of breakpoint: url pairs
   * 
   * ```
{
  default: string, // default image to load (fallback)
  xxxl: string, // different image for each breakpoint (optional). while these are mobile first breakpoints, they MUST be ordered from largest to smallest 
  xxl: string,
  xl: string,
  lg: string,
  md: string,
  sm: string,
  xs: string,
}
  * ```
  */
  bgSrc:
    | string
    | {
        default: string;
        xs?: string;
        sm?: string;
        md?: string;
        lg?: string;
        xl?: string;
        xxl?: string;
        xxxl?: string;
      };
  /** Set vertical position of image */
  bgPosition?: "top" | "center" | "bottom";
  /** Applies custom classNames to overlay content */
  contentClass?: string;
  /** Cover size */
  size?: "small" | "medium" | "large" | "xlarge";
  /** Additional className for the cover container */
  className?: string;
  /** Children content */
  children?: React.ReactNode;
  /** Additional props passed to Image component */
  [key: string]: any;
}

const CLASS_ROOT = "cover";

const Cover: React.FC<CoverProps> = ({
  className,
  children,
  contentClass,
  bgPosition = "center",
  bgSrc,
  size,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${size}`]: size,
    },
    className,
  );

  const contentClasses = cx(`${CLASS_ROOT}__content`, contentClass);

  const bgImgClassName = cx(`${CLASS_ROOT}__image`, {
    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== "center",
  });

  return (
    <div className={classes}>
      {children && <div className={contentClasses}>{children}</div>}
      <Image src={bgSrc} className={bgImgClassName} alt="" {...other} />
    </div>
  );
};

Cover.displayName = "Cover";

export { Cover };