import { SkeletonGroup, SkeletonRectangle } from '@wix/design-system';
import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { GridBaseState } from '../../state';
import { observer } from 'mobx-react-lite';

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

function _SkeletonSideImageCard<T, F extends FiltersMap>(
  props: SkeletonSideImageCardProps<T, F>,
) {
  const {
    state: {
      calcGridProps: { cardFooterHeight },
    },
  } = props;

  return (
    <SkeletonGroup skin="light">
      <SkeletonRectangle width="100%" height={cardFooterHeight} />
    </SkeletonGroup>
  );
}

export const SkeletonSideImageCard = observer(_SkeletonSideImageCard);