import React, { memo } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import type { ReactNode } from 'react';
import { TenantDetails } from '../tenant-details';
import type { TenantDetailsProps } from '../tenant-details';
import type { Theme } from '../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => ({
  title: {
    ...theme.typography.h1,
    color: theme.palette.primary[600],
    paddingRight: theme.spacing(2),
    lineHeight: '44px'
  },
  subtitle: {
    ...theme.typography.subtitle1,
    color: theme.palette.secondary[500],
    paddingBottom: theme.spacing(2)
  }
}));

export interface TenantHeaderProps {
  /**
   * The title of the component.
   */
  title: string;
  /**
   * The subtitle of the component.
   */
  subtitle?: string;
  /**
   * A label component right to the title.
   */
  titleDetail?: ReactNode;
  /**
   * Props which will be passed into the tenant details component.
   */
  tenantDetailsProps: TenantDetailsProps;
}

const TenantHeader = (props: TenantHeaderProps) => {
  const { title, titleDetail, tenantDetailsProps, subtitle } = props;
  const styles = createClasses();

  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex">
        <Typography className={styles.title} component="h1">
          {title}
        </Typography>
        {titleDetail}
      </Box>
      {subtitle && <Typography className={styles.subtitle}>{subtitle}</Typography>}
      <TenantDetails {...tenantDetailsProps} />
    </Box>
  );
};

const m = memo(TenantHeader);
export { m as TenantHeader };