import { Card, Divider } from "antd";
import { FunctionComponent, ReactNode } from "react";
import ProTitle from "../ProTitle";
import styles from "./ProInputCard.module.css";

interface ProInputCardProps {
  children?: ReactNode;
  title?: string | ReactNode;
  titleRight?: ReactNode;
  className?: string;
}

const ProInputCard: FunctionComponent<ProInputCardProps> = ({
  children,
  title,
  titleRight,
  className,
}) => {
  return (
    <Card className={`${styles.ProInputCard} ${className}`}>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        {title && typeof title === "string" && (
          <ProTitle style={{ fontSize: 18 }}> {title} </ProTitle>
        )}
        {title && typeof title !== "string" && title}
        <div style={{ position: "relative", top: 0 }}>{titleRight}</div>
      </div>
      <Divider style={{ margin: "5px 0 15px 0" }} />
      {children}
    </Card>
  );
};

export default ProInputCard;
