import clsx from "clsx";
import * as React from "react";
import { useDebugEvents } from "../../utils";
import * as styles from "./styles.module.css";

export function Row({
  as = "section",
  className,
  children,
  ...rest
}: {
  as: string | React.ElementType;
  className: string;
  children: React.ReactNode;
}) {
  const Tag = as;
  const props = useDebugEvents(rest);
  return (
    <Tag
      className={clsx(styles.row, className)}
      data-component="Row$Brevity"
      {...props}
    >
      {children}
    </Tag>
  );
}