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

export interface JustifyProps extends StyledProps {
  /**
   * 是否顶部对齐
   * @default false
   */
  top?: boolean;

  /**
   * 是否底部对齐
   * @default false
   */
  bottom?: boolean;

  /**
   * 左侧内容
   */
  left?: React.ReactNode;

  /**
   * 右侧内容
   */
  right?: React.ReactNode;
}

export const Justify = forwardRef(function Justify(
  { left, right, top, bottom, className, ...props }: JustifyProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-justify-grid`, className, {
        [`${classPrefix}-justify-grid--start`]: top,
        [`${classPrefix}-justify-grid--end`]: bottom,
      })}
      {...props}
    >
      {left != null && (
        <div
          className={`${classPrefix}-justify-grid__col ${classPrefix}-justify-grid__col--left`}
        >
          {left}
        </div>
      )}
      {right != null && (
        <div
          className={`${classPrefix}-justify-grid__col ${classPrefix}-justify-grid__col--right`}
        >
          {right}
        </div>
      )}
    </div>
  );
});

Justify.displayName = "Justify";