import React from 'react';
import { bem } from 'utils/bem';
import { SProjectOwner, BEM_CLASS } from './s-project-owner';
import { UserAvatar } from 'common/components/user-avatar';
import { Icon } from 'common/components/icon';

const classes = bem(BEM_CLASS);

interface Props {
  name: string;
  email: string;
  className?: string;
  dataSelector?: string;
}

export const ProjectOwner = ({ name, email, className, dataSelector }: Props) => {
  return (
    <SProjectOwner className={className} data-selector={`${dataSelector}-project-owner`}>
      <UserAvatar size={30} name={name} />
      <div className={classes('contact')}>
        <span className={classes('contact-name')}>{name}</span>
        <span className={classes('contact-email')} data-selector={`${dataSelector}-project-owner-email`}>
          {email}
        </span>
      </div>
      <Icon name="envelope" size="medium" color="wildStrawberry" />
    </SProjectOwner>
  );
};