import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { ReactNode } from "react";

const logoSrc = "/images/sign-in/gpsf-logo.png";

type AuthLogoHeaderProps = {
  children?: ReactNode;
  title: string;
};

export function AuthLogoHeader({ children, title }: AuthLogoHeaderProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 2,
      }}
    >
      <Box
        component="img"
        src={logoSrc}
        alt="Cambodia G-PSF"
        sx={{ display: "block", width: 255, maxWidth: "100%", height: "auto" }}
      />

      <Typography
        sx={{
          fontSize: 20,
          fontWeight: 500,
          lineHeight: 1,
          letterSpacing: "-0.02em",
          color: "#717680",
          textAlign: "center",
        }}
      >
        {title}
      </Typography>

      {children}
    </Box>
  );
}