import React from "react";

import { SxProps } from "@mui/material";
import Box, { BoxProps } from "@mui/material/Box";

import { LogoType } from "../types";
import { ss } from "../util/select_styles";

import Logo from "./Logo";
import { LogoProps } from "./Logo";

export interface BrandProps {
  src?: LogoType;
  sx?: SxProps;
  LogoProps?: LogoProps;
  BoxProps?: Omit<BoxProps, "sx">;
}

const Brand: React.FC<BrandProps> = ({ BoxProps, src, sx, LogoProps }) => {
  return (
    <Box
      sx={ss(
        {
          textAlign: "center",
          width: "100%",
          lineHeight: 0,
          "& > svg, & > img": {
            width: "100% !important",
            height: "100% !important",
            fill: "currentColor",
            "& > path": {
              fill: "unset",
            },
            ...LogoProps?.style,
          },
        },
        sx,
      )}
      {...BoxProps}
    >
      <Logo src={src} {...LogoProps} />
    </Box>
  );
};

export default Brand;