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

export interface DividerProps {
  /**
   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
   * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
   * @default false
   */
  isContent?: boolean;

  /**
   * Alters the visual style of the divider, accommodating different types
   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
   * @default 'section'
   */
  level?: 'section' | 'subsection' | 'content';

  className?: string;
  testId?: string;
}

/**
 * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role="presentation">`.
 * @param {string} [className] - Optional class names for adding custom styling to the divider.
 * @param {string} [testId] - Provides a `data-testid` for testing frameworks.
 * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.
 *
 * @see {@link Divider} for further information.
 * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
 */
const Divider: FunctionComponent<DividerProps> = ({
  className,
  isContent = false,
  testId,
  level = 'section',
  ...props
}) => {
  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';

  const commonProps = {
    className: clsx('wds-Divider', levelClass, className),
    'data-testid': testId,
  };

  const divProps = {
    ...commonProps,
    role: 'presentation',
  };

  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;
};

export default Divider;