import { Link as RouterLink } from 'react-router';

import { Avatar, Box, Link, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { blue, gray } from '../../../themes/common';
import type { Module } from '../types';
import { decodeHtml } from '../utils/text';

interface Props {
  className?: string;
  module: Module;
}

const useStyles = makeStyles()(theme => ({
  head: { display: 'flex', alignItems: 'center' },
  avatar: { marginRight: 8, width: 32, height: 32 },
  title: { color: blue[500] },
  author: { color: gray[600] },
  description: { marginTop: 8, color: theme.palette.text.primary }
}));

// Title + author + description block shared by the modules list and the
// per-category module grid on the project page.
export const ModuleSummary = ({ className, module }: Props) => {
  const { classes } = useStyles();
  return (
    <Box className={className}>
      <Box className={classes.head}>
        <Avatar className={classes.avatar} src={module.author?.image} alt={module.author?.name ?? ''} />
        <Box>
          <Link component={RouterLink} variant="h6" to={`/modules/${module.name}`} className={classes.title}>
            {module.name}
          </Link>
          <Typography variant="caption" component="div" className={classes.author}>
            by {module.author?.name}
          </Typography>
        </Box>
      </Box>
      <Typography variant="subtitle1" className={classes.description}>
        {decodeHtml(module.description)}
      </Typography>
    </Box>
  );
};
