import { memo, SyntheticEvent, useState } from 'react';
import type { ReactNode } from 'react';

import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

import { Avatar } from '../../avatar';
import type { AvatarProps } from '../../avatar';

import clsx from 'clsx';
import createClasses from './styles';

export interface InfoCardWithAvatarProps {
  id?: string;
  activ?: boolean;
  /**
   * Title which will be displayed.
   */
  title: string | ReactNode;
  /**
   * Subtitle which will be displayed.
   */
  subtitle: string | ReactNode;
  /**
   * Props which will be passed into the Avatar component.
   */
  avatarProps?: AvatarProps;
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
  /**
   * On click handler.
   */
  onClick?: (e: SyntheticEvent<EventTarget>) => void;
  /**
   * On keydown handler.
   */
  onKeyDown?: (e: SyntheticEvent<EventTarget>) => void;
}

const InfoCardWithAvatar = (props: InfoCardWithAvatarProps) => {
  const { activ, title, subtitle, avatarProps, className, ...otherProps } = props;
  const classes = createClasses();
  return (
    <Card
      tabIndex={0}
      aria-labelledby="info-card-title"
      aria-describedby="info-card-subtitle"
      className={activ ? clsx(classes.activ, className) : clsx(classes.root, className)}
      {...otherProps}
    >
      <Grid container>
        {avatarProps && (
          <Grid item className={classes.avatarContainer}>
            <Avatar color="inherit" className={classes.avatar} {...avatarProps} />
          </Grid>
        )}
        <Grid item xs>
          <Typography id="info-card-title" component="div" className={classes.title}>
            {title}
          </Typography>
          <Typography id="info-card-subtitle" component="div" className={classes.subtitle}>
            {subtitle}
          </Typography>
        </Grid>
      </Grid>
    </Card>
  );
};

InfoCardWithAvatar.defaultProps = {};

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