import styled from "styled-components";
import { Header } from "@ax/components/TableList/style";

const TableHeader = styled.div<{ isScrolling?: boolean }>`
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
  margin-left: ${(p) => p.theme.spacing.xs};
  margin-right: ${(p) => p.theme.spacing.xs};
`;

const UserHeader = styled(Header)`
  width: 24%;
  padding: ${(p) => `0 0 0 ${p.theme.spacing.s}`};
  & > div {
    margin-right: ${(p) => p.theme.spacing.m};
  }
`;

const TimeHeader = styled(Header)`
  width: 8%;
  justify-content: center;
  padding: 0;
`;

const SiteHeader = styled(Header)`
  width: 15%;
  justify-content: center;
  padding: 0;
`;

const ContentHeader = styled(Header)`
  width: 15%;
  justify-content: center;
  padding: 0;
`;

const EventHeader = styled(Header)`
  width: 38%;
  padding: 0;
`;

const FiltersHeader = styled(Header)`
  width: 50%;
  padding: ${(p) => `0 0 0 ${p.theme.spacing.s}`};
  & > div {
    margin-right: ${(p) => p.theme.spacing.m};
  }
`;

const SiteUserHeader = styled(Header)`
  width: 25%;
  padding: 0;
`;

const ContentUserHeader = styled(Header)`
  width: 25%;
  padding: ${(p) => `0 ${p.theme.spacing.s} 0 0`};
`;

export {
	TableHeader,
	UserHeader,
	TimeHeader,
	SiteHeader,
	ContentHeader,
	EventHeader,
	FiltersHeader,
	ContentUserHeader,
	SiteUserHeader,
};
