import React from 'react';
import { clsx } from 'clsx';
import * as BaseToast from '@radix-ui/react-toast';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './toast-viewport.css';

export interface ToastViewportProps
  extends Omit<BaseToast.ToastViewportProps, 'asChild'>,
    css.ToastViewportVariants {}

export const ToastViewport = forwardRef<'ol', ToastViewportProps>(
  ({ as = 'ol', vertical, horizontal, className, ...rest }, ref) => (
    <BaseToast.ToastViewport {...rest} asChild>
      <Box
        className={clsx(className, css.toastViewport({ vertical, horizontal }))}
        as={as}
        ref={ref}
      />
    </BaseToast.ToastViewport>
  ),
);