import { oneOf } from 'prop-types';
import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';

export const Divider = forwardRef<HTMLHRElement, DividerProps>(
    ({ orientation, variant, ...props }, ref) => (
        <hr
            {...props}
            className={`m3 m3-divider ${orientation ?? 'horizontal'} ${variant ?? 'full-width'}`.trimEnd()}
            ref={ref}
        />
    ),
);

Divider.propTypes = {
    orientation: oneOf(['vertical', 'horizontal']),
    variant: oneOf(['full-width', 'inset', 'middle-inset']),
};