import React from 'react';
import PropTypes from 'prop-types';
import { ChevronRightRounded } from '@mui/icons-material';

import { Grid, Tooltip, Typography } from '@/mui/components';

import styles from './Layout.module.scss';

function Layout(props) {
  return (
    <Grid item className={styles.Wrapper}>
      <Grid container direction="column" justifyContent="center">
        {props.children}
      </Grid>
    </Grid>
  );
}

function CategoriesSlot(props) {
  return (
    <Grid item alignItems="center" className={styles.CategoriesSlot}>
      <Grid container alignItems="flex-start" flexWrap="nowrap">
        <Grid item>
          <Typography variant="subtitle2" color="text.primary" className={styles.CategoryTitle}>
            <Tooltip title={props.titleTooltipText} placement="top" enterDelay={100} leaveDelay={0} arrow>
              <span className={styles.CategoryTitleText}>{props.title}</span>
            </Tooltip>
            <ChevronRightRounded />
          </Typography>
        </Grid>
        <Grid item className={styles.CategoriesSlotChildren}>
          {props.children}
        </Grid>
      </Grid>
    </Grid>
  );
}

function TagsSlot(props) {
  return (
    <Grid item className={styles.TagsSlot}>
      {props.children}
    </Grid>
  );
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

CategoriesSlot.propTypes = {
  children: PropTypes.node.isRequired,
  title: PropTypes.string.isRequired,
  titleTooltipText: PropTypes.string.isRequired,
};

TagsSlot.propTypes = {
  children: PropTypes.node.isRequired,
};

export { Layout, CategoriesSlot, TagsSlot };
