import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface MediaObjectProps extends StyledProps {
  /**
   * 媒体元素
   */
  media?: React.ReactNode;

  /**
   * 内容块
   */
  children: React.ReactNode;

  /**
   * 媒体元素与内容块对齐方式
   * @default "top"
   */
  align?: "top" | "middle" | "bottom";

  /**
   * 媒体元素与内容块反置
   * @default false
   */
  reverse?: boolean;
}

export const MediaObject = React.forwardRef(function MediaObject(
  {
    align = "top",
    reverse,
    media,
    children,
    className,
    ...props
  }: MediaObjectProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(className, `${classPrefix}-media`, {
        [`${classPrefix}-media--reverse`]: reverse,
        [`${classPrefix}-media--middle`]: align === "middle",
        [`${classPrefix}-media--bottom`]: align === "bottom",
      })}
      {...props}
    >
      {media && <div className={`${classPrefix}-media__left`}>{media}</div>}
      <div className={`${classPrefix}-media__body`}>{children}</div>
    </div>
  );
});

MediaObject.displayName = "MediaObject";