import React, { forwardRef } from "react"
import { classNames } from "../../utils"
import {
  VerticalAligned,
  VerticalAlignedProps,
} from "../VerticalAligned/VerticalAligned"

export type CenterAlignedProps = VerticalAlignedProps

/**
 * Aligns its children vertically and horizontally.
 */
export const CenterAligned = forwardRef<HTMLDivElement, CenterAlignedProps>(
  function CenterAligned({ className, ...rest }, ref) {
    return (
      <VerticalAligned
        className={classNames("items-center", className)}
        ref={ref}
        {...rest}
      />
    )
  },
)