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

import styled from "styled-components";

const TableHeader = styled.div<{ isScrolling?: boolean }>`
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
  min-height: 40px;
`;

const CheckHeader = styled(Header)`
  padding-right: 0;
  width: 40px;
  padding-left: ${(p) => p.theme.spacing.m};
  label {
    margin-bottom: ${(p) => p.theme.spacing.s};
  }
  > div {
    width: ${(p) => p.theme.spacing.s};
  }
`;

const NameHeader = styled(Header)`
  width: 35%;
  flex-grow: 1;
`;

const LiveHeader = styled(Header)`
  width: 80px;
  justify-content: center;
`;

const StatusHeader = styled(Header)`
  width: 170px;
  justify-content: center;
`;

const TransHeader = styled(Header)`
  width: 115px;
  justify-content: center;
`;

const SeoHeader = styled(Header)`
  width: 124px;
`;

const TypeHeader = styled(Header)`
  width: 170px;
  justify-content: center;
`;

const GlobalMark = styled(Header)`
  flex: 0 0 24px;
  padding-right: 0;
  padding-left: 0;
`;

const ActionsHeader = styled(Header)`
  flex: 0 0 85px;
  padding-right: 0;
  padding-left: 0;
  justify-content: flex-end;
  align-items: center;
`;

const NameWrapper = styled.div`
  flex-grow: 1;
  position: relative;
`;

const HeaderWrapper = styled.div`
  position: relative;
`;

const ColumnHeader = styled(Header)`
  flex: 0 0 215px;
  justify-content: center;
`;

export {
	TableHeader,
	CheckHeader,
	NameHeader,
	LiveHeader,
	StatusHeader,
	TransHeader,
	SeoHeader,
	ActionsHeader,
	NameWrapper,
	HeaderWrapper,
	GlobalMark,
	TypeHeader,
	ColumnHeader,
};
