import type { FC, CSSProperties } from 'react';
import React from 'react';
import cx from 'classnames';

const CLASS_NAME = 'SuiteDivider';

export interface DividerProps {
    className?: string;
    style?: CSSProperties;
    testId?: string;
    /**
     * Width of the divider
     * @default 1px
     */
    width?: number;
    /**
     * Fixed height of the divider
     */
    height?: number;
    /**
     * Margin on divider length
     * @default 1px
     */
    margin?: number;
    /**
     * Padding on the cross-axis
     * @default 0px
     */
    padding?: number;
    /**
     * Direction of the divider
     * @default vertical
     */
    direction?: 'horizontal' | 'vertical';
}

/**
 * Divider to separate other components
 *
 * @tags utilities
 * @status live
 * @type atom
 */
export const Divider: FC<DividerProps> = ({
    className,
    style,
    testId,
    width,
    height,
    margin,
    padding,
    direction = 'vertical',
}) => (
    <span
        className={cx(CLASS_NAME, className, `${CLASS_NAME}-${direction}`)}
        data-testid={testId}
        role="separator"
        style={
            {
                '--suite-divider-width': width && `${width}px`,
                '--suite-divider-margin': margin && `${margin}px`,
                '--suite-divider-padding': padding && `${padding}px`,
                height,
                ...style,
            } as CSSProperties
        }
    />
);