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';
import React from 'react';

export default 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';