import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './separator.css';

/*-- Types --*/

export interface SeparatorProps extends css.SeparatorVariants {}

/*-- Main --*/

export const Separator = forwardRef<'hr', SeparatorProps>(function Separator(
  { as = 'hr', className, spacing = 'md', ...rest },
  ref,
) {
  const cn = clsx(className, css.separator({ spacing }));

  return <Box ref={ref} as={as} className={cn} {...rest}></Box>;
});