import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';
import { ImageRounded } from '@mui/icons-material';

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

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

function TemplateItem({ thumb = '', ...props }) {
  return (
    <Grid item className={styles.ListItem} title={props.name} onClick={props.onOpen}>
      <Grid container className={styles.ListItemThumbnail}>
        {!thumb && <ImageRounded htmlColor="info.main" fontSize="large" />}

        {thumb && <Image src={thumb} alt={props.name} width={500} height={500} />}
      </Grid>
      <Grid container className={styles.ListItemTitle}>
        <Typography variant="caption" color="text.primary" fontWeight={400}>
          {props.name}
        </Typography>
      </Grid>
    </Grid>
  );
}

TemplateItem.propTypes = {
  thumb: PropTypes.string,
  name: PropTypes.string.isRequired,
  onOpen: PropTypes.func.isRequired,
};

export default TemplateItem;
