import { clsx } from 'clsx';
import { ReactNode } from 'react';

import { useTheme } from './useTheme';

type ThemedChildrenProps = { className?: string; children: ReactNode };

export const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {
  const { className: themeClass } = useTheme();

  return <div className={clsx(themeClass, className)}>{children}</div>;
};