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;
  dividerStyle?: React.CSSProperties;
}

const ProInputCard: FunctionComponent<ProInputCardProps> = ({
  children,
  title,
  titleRight,
  className,
  dividerStyle,
}) => {
  return (
    <Card className={`${styles.ProInputCard} ${className}`}>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        {title && typeof title === "string" && (
          <ProTitle
            style={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 18,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: '#333333',
            }}
          >
            {title}
          </ProTitle>
        )}
        {title && typeof title !== "string" && title}
        <div style={{ position: "relative", top: 0 }}>{titleRight}</div>
      </div>
      <Divider style={{ margin: "3px 0 12px 0", ...dividerStyle }} />
      {children}
    </Card>
  );
};

export default ProInputCard;