import * as React from "react";
import { Card, CardProps } from "@front10/base-elements";

function BaseCardWithRef(
  props: React.PropsWithChildren<CardProps>,
  ref: React.Ref<HTMLDivElement>
) {
  return (
    <Card
      variant="primary"
      sx={(theme) => ({
        ...theme.layout?.cardContainer,
        display: "grid",
        gridTemplateRows: "min-content",
        ".emoji": {
          display: "inline",
          height: "1em",
          width: "1em",
          margin: "0 .05em 0 .1em",
          verticalAlign: "-0.1em",
        },
      })}
      {...props}
      ref={ref}
      className="wx-card"
    >
      {props.children}
    </Card>
  );
}

export const BaseCard = React.forwardRef(BaseCardWithRef);