import clsx from "clsx";

import { Typography } from "@/components/ui";

import styles from "./MessageMeta.module.scss";

interface MessageMetaProps extends React.ComponentProps<"div"> {
  time: string | null;
  timeClassName?: string;
  children?: React.ReactNode;
}

export default function MessageMeta({
  time,
  timeClassName,
  children,
  className,
}: MessageMetaProps) {
  return (
    <div className={clsx(styles.meta, className)}>
      {time && (
        <Typography size="xs" color="secondary" className={clsx(timeClassName)}>
          {time}
        </Typography>
      )}
      {children}
    </div>
  );
}
