import {
  BrowserIcon, OsIcon, Icon, CountryFlag, Link,
} from 'UI';
import { deviceTypeIcon } from 'App/iconNames';
import { session as sessionRoute } from 'App/routes';
import { formatTimeOrDate } from 'App/date';

function SessionLine({
  session: {
    userBrowser,
    userOs,
    userCountry,
    siteId,
    sessionId,
    viewed,
    userDeviceType,
    startedAt,
  },
}) {
  return (
    <div className="flex justify-between items-center" style={{ padding: '5px 20px' }}>
      <div className="color-gray-medium font-size-10">
        <CountryFlag country={userCountry} className="mr-4" />
        { formatTimeOrDate(startedAt) }
      </div>
      <div className="flex">
        <BrowserIcon browser={userBrowser} className="mr-4" />
        <OsIcon os={userOs} size="20" className="mr-4" />
        <Icon name={deviceTypeIcon(userDeviceType)} size="20" className="mr-4" />
      </div>
      <Link to={sessionRoute(sessionId)} siteId={siteId}>
        <Icon
          name={viewed ? 'play-fill' : 'play-circle-light'}
          size="20"
          color="teal"
        />
      </Link>
    </div>
  );
}

SessionLine.displayName = 'SessionLine';

export default SessionLine;