import { Box, Heading } from 'components/common';
import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
import { HelpIcon } from './HelpIcon';

import './Tile.css';

interface TileProps {
  name?: string;
  description?: string;
  toggleMenu?: React.MouseEventHandler<HTMLDivElement>;
  children: React.ReactNode;
}

export const Tile = ({
  name,
  description,
  toggleMenu,
  children,
}: TileProps) => {
  return (
    <Box
      className="tile rounded4 oh bg-white"
      style={{ border: '1px solid var(--borderColor)' }}
      width="100%"
      height="100%"
      display="flex"
      column
      padding={4}
      spacingY={4}
    >
      <Box display="flex" justify="between">
        {name && (
          <Box display="flex" align="center" spacing={2}>
            <Heading>{name}</Heading>
            <HelpIcon content={description} />
          </Box>
        )}
        {toggleMenu && (
          <div
            className="tile-button"
            style={{ height: 20, width: 20 }}
            onClick={toggleMenu}
          >
            <MenuIcon
              style={{
                height: '100%',
                transform: 'scale(.8) rotate(90deg)',
                pointerEvents: 'none',
              }}
            />
          </div>
        )}
      </Box>
      <Box
        // className="tile-children"
        display="flex"
        column
        flex="grow"
      >
        {children}
      </Box>
    </Box>
  );
};