import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme } from '@material-hu/mui/styles';
import { composeSx } from '@material-hu/utils/components';

import humandWordmark from 'src/assets/humand.svg';

import { type CertificateLogoDisplay } from '../types';

import { getHeaderStyles } from './shared.styles';

/** Props for the shared header (Humand wordmark + client logos + divider). */
type CertificatePreviewHeaderProps = {
  /** Already-filtered list of logos with an uploaded image. */
  logos: CertificateLogoDisplay[];
  /** Divider color below the header. When omitted, no divider is rendered. */
  dividerColor?: string;
  /** Inverts the Humand wordmark to white (dark backgrounds). Defaults false. */
  wordmarkInvert?: boolean;
  /** Extra styles merged into the header container (e.g. padding). */
  sx?: SxProps<Theme>;
};

const CertificatePreviewHeader = ({
  logos,
  dividerColor,
  wordmarkInvert = false,
  sx,
}: CertificatePreviewHeaderProps) => {
  const styles = getHeaderStyles({ wordmarkInvert, dividerColor });

  return (
    <>
      <Stack sx={composeSx(styles.header, sx)}>
        <Stack
          component="img"
          src={humandWordmark}
          alt="humand"
          sx={styles.wordmark}
        />
        {logos.length > 0 && (
          <Stack sx={styles.logos}>
            {logos.map((logo, i) => (
              <Stack
                key={i}
                component="img"
                src={logo.imageUrl}
                alt=""
                sx={styles.logoImg}
              />
            ))}
          </Stack>
        )}
      </Stack>
      {dividerColor && <Stack sx={styles.headerDivider} />}
    </>
  );
};

export default CertificatePreviewHeader;
