import { FC, memo, ReactNode } from "react";
import { cn } from "../utils";

interface PropsType {
  content: ReactNode;
  position?: "center" | "right" | "left";
  className?: string;
}
const Divider: FC<PropsType> = ({ content, className, position = 'center' }) => {
  return (
    <div
      className={cn(
        className,
        "uikit-flex uikit-items-center uikit-justify-between uikit-gap-3 uikit-select-none",
      )}
    >
      {position === 'left' ? null : <span className="uikit-inline-block uikit-flex-1 uikit-h-[1px] uikit-bg-line"></span>}
      <span className="uikit-text-[#8989AB] uikit-font-switzer uikit-text-[14px]">
        {content}
      </span>
     {position === 'right' ? null : <span className="uikit-inline-block uikit-flex-1 uikit-h-[1px] uikit-bg-line"></span>}
    </div>
  );
};

export default memo(Divider);