import { css } from "@emotion/react";
import type { ReactNode } from "react";

/**
 * A component that renders a row at the top of a table cell
 */
export function CellTop({
  children,
  extra,
}: {
  children?: ReactNode;
  /**
   * Additional content like controls that will be placed on the right
   */
  extra?: ReactNode;
}) {
  return (
    <div css={cellTopCSS}>
      <div css={childrenWrapCSS}>{children}</div>
      <div css={extraCSS}>{extra}</div>
    </div>
  );
}

const cellTopCSS = css`
  padding: 0 var(--global-dimension-size-100) 0 var(--global-dimension-size-200);
  border-bottom: var(--global-border-size-thin) solid
    var(--global-color-gray-100);
  background-color: var(--global-color-gray-50);
  min-height: 39px;
  display: flex;
  flex-direction: row;
  gap: var(--global-dimension-size-100);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  flex: none;
`;

const childrenWrapCSS = css`
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
`;

const extraCSS = css`
  display: flex;
  flex-direction: row;
  gap: var(--global-dimension-size-50);
  align-items: center;
  flex: none;
`;
