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

export const Stack = forwardRef(function Stack(
  { as: Tag = 'div', gap, gapY = gap, className, ...props },
  ref,
) {
  return <Tag className={clsx(className, 'stack', `stack-${gapY}`)} {...props} ref={ref} />;
});

export const Plain = forwardRef(function Plain(
  { as: Tag = 'div', gap, gapY = gap, className, ...props },
  ref,
) {
  return <Tag className={clsx(className, 'prose', `prose-${gapY}`)} {...props} ref={ref} />;
});

export const Chain = forwardRef(function Chain(
  { as: Tag = 'div', gap, gapX = gap, className, ...props },
  ref,
) {
  return <Tag className={clsx(className, 'chain', `chain-${gapX}`)} {...props} ref={ref} />;
});