import { SkeletonSideImageCard } from './SkeletonSideImageCard';
import { SkeletonTopImageCard } from './SkeletonTopImageCard';
import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { GridBaseState } from '../../state';

export interface SkeletonCardByImagePlacementProps<T, F extends FiltersMap> {
  state: GridBaseState<T, F>;
}

export function SkeletonCardByImagePlacement<T, F extends FiltersMap>(
  props: SkeletonCardByImagePlacementProps<T, F>,
) {
  const { state } = props;
  const { imagePlacement } = state;

  return imagePlacement === 'side' ? (
    <SkeletonSideImageCard state={state} />
  ) : (
    <SkeletonTopImageCard state={state} />
  );
}