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

interface ViewProps extends React.HTMLAttributes<HTMLDivElement> {
  id?: string;
  flexDir?: 'row' | 'col';
  gap?: number;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
  children?: React.ReactNode;
}

const View = forwardRef<HTMLDivElement, ViewProps>((props, ref) => {
  const {
    id,
    flexDir,
    gap,
    className,
    style,
    children,
    ...restProps
  } = props;

  return (
    <div
      ref={ref}
      id={id}
      className={cs(classes['chat-view'], className, {
        [classes['chat-view--flex-dir-row']]: flexDir === 'row',
        [classes['chat-view--flex-dir-col']]: flexDir === 'col',
      })}
      style={{
        ...style,
        gap: gap ? `${gap}px` : undefined,
      }}
      {...restProps}
    >
      {children}
    </div>
  );
});

View.displayName = 'View';

export { View };
export type { ViewProps };