import { CardContext } from '@/components/card/context/CardContext';
import { SkeletonCardContent } from '@/components/skeletons/components/SkeletonCardContent';
import { SkeletonCardFooter } from '@/components/skeletons/components/SkeletonCardFooter';
import { classNames } from '@/utils/classNames';

type TSkeletonCardProps = {
  theme: 'light' | 'dark';
  className?: string;
  children?: React.ReactNode;
};

function SkeletonCard({ theme, className = '', children }: TSkeletonCardProps): React.ReactElement {
  return (
    <CardContext.Provider
      value={{
        theme,
        isLink: false,
      }}
    >
      <div
        className={classNames(
          'rounded-lg border',
          theme === 'light' ? 'border-gray-ui/5' : 'border-gray-ui-700',
          className,
        )}
      >
        {children}
      </div>
    </CardContext.Provider>
  );
}

SkeletonCard.Content = SkeletonCardContent;
SkeletonCard.Footer = SkeletonCardFooter;

export { SkeletonCard };