import styled from "styled-components";

const Title = styled.div`
  ${(p) => p.theme.textStyle.fieldContent}
`;

const Header = styled.div`
  display: flex;
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

const Type = styled.div`
  ${(p) => p.theme.textStyle.headingXS};
`;

const Date = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  margin-left: auto;
`;

const ListItem = styled.li<{ disabled: boolean }>`
  display: flex;
  width: 100%;
  padding: ${(p) => p.theme.spacing.s};
  background-color: ${(p) => p.theme.color.uiBarBackground};
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
  :hover {
    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    cursor: pointer;
  }
  ${Title}, ${Type}, ${Date} {
    color: ${(p) => (p.disabled ? p.theme.colors.interactiveDisabled : p.theme.colors.textHighEmphasis)};
  }
`;

const Content = styled.div`
  width: 100%;
`;

export { ListItem, Title, Header, Type, Date, Content };
