import React, { memo } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import { Link } from '../../@navigation/link';
import { ReactSVG } from 'react-svg';
import createClasses from './styles';

export interface InfoCardItemProps {
  /**
   * The text that will be displayed at top of the component.
   */
  title: string;
  /**
   * The text that will be displayed in the second line.
   */
  subtitle?: string;
  /**
   * Providing this prop will make the subtitle become a link.
   */
  href?: string;
  /**
   * Providing this prop will override subtitle.
   */
  icons?: { src: string }[];
}

const InfoCardItem = (props: InfoCardItemProps) => {
  const { title, href, icons, subtitle } = props;

  const classes = createClasses();

  return (
    <Box display="flex" flexDirection="column">
      <Typography className={classes.title}>{title}</Typography>
      {icons?.length && (
        <Box display="flex" className={classes.iconContainer}>
          {icons.map(icon => {
            const { src } = icon;
            return <ReactSVG key={src} src={src} className={classes.icon} />;
          })}
        </Box>
      )}
      {!icons?.length &&
        (href ? (
          <Link href={href} table>
            <Typography variant="body2">{subtitle}</Typography>
          </Link>
        ) : (
          <Typography className={classes.subtitle}>{subtitle}</Typography>
        ))}
    </Box>
  );
};

const m = memo(InfoCardItem);
export { m as InfoCardItem };