import createUseStyles from "../theme/createUseStyles";
import { cn } from "../util/cn";

export const TABLE_ROW_HEIGHT = 35;

const useStyles = createUseStyles({
  tableRow: {
    "& > div": {
      "&:first-child": {
        flexGrow: [3, "!important"],
      },
      "&:last-child": {
        alignContent: "flex-end",
      },
      "&:nth-last-child(2)": {
        flexGrow: [1, "!important"],
      },
      alignContent: "center",
      display: "flex",
      flex: 1,
      flexFlow: "column",
      flexGrow: 2,
      justifyContent: "center",
      padding: "var(--spacing-xxs) 0",
    },
    "&:hover": {
      backgroundColor: "rgba(255, 255, 255, 0.15)",
      cursor: "pointer",
    },
    "&:not(:last-child)": {
      borderBottom: "1px solid var(--color-grey)",
    },
    height: TABLE_ROW_HEIGHT,
  },
});

export default function TableRow({
  children,
  rowClassName,
  rowProps,
}: React.PropsWithChildren<{
  rowClassName?: string;
  rowProps?: {
    onClick: React.MouseEventHandler<HTMLElement>;
    tabIndex: 0;
  };
}>) {
  const classes = useStyles();

  return (
    <div className={cn("flex-1 flex gap-m py-xxs px-s", classes.tableRow, rowClassName)} {...rowProps}>
      {children}
    </div>
  );
};
