import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import injectCss from "@insite/mobius/utilities/injectCss";
import MobiusStyledComponentProps from "@insite/mobius/utilities/MobiusStyledComponentProps";
import styled from "styled-components";

export interface DataTableCellBaseContextData {
    /** How the content should align within the cell. */
    alignX?: "left" | "center" | "right";
    /** Sets the cell/column width to be as narrow as possible. */
    tight?: boolean;
}

export type DataTableCellBaseProps = MobiusStyledComponentProps<"td", DataTableCellBaseContextData & InjectableCss>;

const DataTableCellBase = styled.td<DataTableCellBaseContextData & InjectableCss>`
    box-sizing: border-box;
    height: 50px;
    padding: 0 12px;
    border-bottom: 1px solid ${getColor("common.border")};
    white-space: nowrap;
    ${({ tight }) => tight && "width: 1px;"}
    ${({ alignX = "left" }) => alignX && `text-align: ${alignX};`};
    ${injectCss}
`;

export default DataTableCellBase;
