import { IconButton } from '../../IconButton';
import { Skeleton } from '../../Skeleton';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
const getGridRow = (hasDescription, hasBreadcrumbs) => {
    if (!hasDescription && !hasBreadcrumbs) {
        return '1 / 4';
    }
    if (!hasDescription) {
        return '2 / 4';
    }
    if (!hasBreadcrumbs) {
        return '1 / 3';
    }
    return '2';
};
export const TitleWrapper = styled(Typography, {
    shouldForwardProp: (prop) => !['$hasDescription', '$hasBreadcrumbs'].includes(prop),
}) `
  overflow: hidden;
  grid-column: 2;
  grid-row: ${({ $hasDescription, $hasBreadcrumbs }) => getGridRow($hasDescription, $hasBreadcrumbs)};
  align-self: center;

  margin-right: ${({ theme }) => theme.spacing(3)};

  line-height: ${({ theme }) => theme.typography.h2.lineHeight};
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    font-size: ${({ theme }) => theme.typography.h5.fontSize};
    line-height: ${({ theme }) => theme.typography.h5.lineHeight};
    white-space: nowrap;
  }
`;
export const BackButton = styled(IconButton) `
  grid-column: 1;
  grid-row: 1 / 4;

  margin-right: ${({ theme }) => theme.spacing(3)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-right: ${({ theme }) => theme.spacing(1)};
    
    border: unset;
  }
`;
export const StyledSkeleton = styled(Skeleton) `
  grid-column: 2;
  grid-row: 2;

  margin: ${({ theme }) => theme.spacing(1, 0)};
`;
