/**
 * TEAM: frontend_infra
 *
 * @flow strict
 */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";

export default function StaticCell<T>({
  data,
  children,
}: {
  +data: T,
  +children: T => React.Node | string,
  ...
}): React.Element<"div"> {
  return <div className={css(styles.wrapper)}>{children(data)}</div>;
}

const styles = StyleSheet.create({
  wrapper: {
    display: "flex",
    flexDirection: "column",
    padding: "0px 12px",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    width: "100%",
  },
});