import Link, { LinkType } from '../Link';
import styles from './Author.module.scss';
import { Image as ImageI, Link as LinkI } from '../../models/common';
import Img from '../Image';
import { TEXTPOSITION } from '../../models/common';
import ShareButton from './ShareButton';

export type Props = {
  name: string;
  role: string;
  image: ImageI;
  link: LinkI;
  containerPosition: TEXTPOSITION;
};

const Author = (props: Props): JSX.Element => {
  const {
    name,
    role,
    image,
    link,
    containerPosition = TEXTPOSITION.DEFAULT,
  } = props;
  return (
    <div className={styles.author}>
      <div className={`${styles.share} ${styles[containerPosition]}`}>
        <div className={styles.leftContainer}>
          <div className={styles.leftCol}>
            <Img
              alt={image?.alt || ''}
              image={{ ...image, width: 52, height: 52 }}
            />
          </div>
          <div className={styles.rightCol}>
            {containerPosition && (
              <div className={`h6 ${styles.title} ${styles.h6}`}>{name}</div>
            )}
            {!containerPosition && (
              <div className={`h5 ${styles.title} ${styles.h5}`}>{name}</div>
            )}
            <div
              className={`text_5 ${styles.subTitle} ${
                containerPosition ? 'h7_links' : ''
              }`}
            >
              {role}
            </div>
          </div>
        </div>
        <div>
          <ShareButton />
        </div>
      </div>
    </div>
  );
};
export default Author;