import type React from 'react';
import { forwardRef } from 'react';
import cs from 'classnames';
import classes from './Divider.module.scss';

interface DividerProps {
  variant?: 'line' | 'section';
  fullWidth?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const Divider = forwardRef<HTMLDivElement, DividerProps>((props, ref) => {
  const {
    variant = 'line',
    fullWidth = false,
    className,
    style,
  } = props;

  return (
    <div
      ref={ref}
      className={cs(classes['chat-setting-divider'], classes[`chat-setting-divider--${variant}`], className)}
      style={style}
    >
      <div
        className={cs(
          classes['chat-setting-divider__inner'],
          fullWidth && classes['chat-setting-divider__inner--full-width'],
        )}
      />
    </div>
  );
});

Divider.displayName = 'Divider';

export { Divider };
export type { DividerProps };