import React from "react";
import styled from "styled-components";
import { Tag } from "@ax/components";

const ActivityItem = styled.div`
  display: flex;
  margin-bottom: ${(p) => p.theme.spacing.xxs};
  position: relative;
  cursor: pointer;
  &:last-child {
    margin-bottom: ${(p) => p.theme.spacing.xs};
  }
  :before {
    content: "";
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  &:hover {
    &:before {
      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    }
  }
`;

const EventWrapper = styled.div`
  display: flex;
  width: 50%;
`;

const Time = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  width: 56px;
  flex-shrink: 0;
`;

const Site = styled.div`
  display: flex;
  align-items: center;
  width: 25%;
`;

const ContentType = styled.div`
  display: flex;
  align-items: center;
  width: 25%;
`;

const Event = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  align-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  width: 100%;
  span {
    margin-left: ${(p) => p.theme.spacing.xxs};
    color: ${(p) => p.theme.colors.interactive01};
  }
`;

const Label = styled.div`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  margin-right: ${(p) => p.theme.spacing.xs};
`;

const StyledTag = styled((props) => <Tag {...props} />)`
  margin-bottom: 0;
`;

export { ActivityItem, EventWrapper, Time, Site, ContentType, Event, Label, StyledTag };
