import {
  Box,
  SkeletonGroup,
  SkeletonLine,
  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 SkeletonTopImageCardProps<T, F extends FiltersMap> {
  state: GridBaseState<T, F>;
}

function _SkeletonTopImageCard<T, F extends FiltersMap>(
  props: SkeletonTopImageCardProps<T, F>,
) {
  const {
    state: {
      preset,
      calcGridProps: { cardTopImageHeight, cardFooterHeight },
    },
  } = props;

  return (
    <SkeletonGroup skin="light">
      <Box direction="vertical" width="100%">
        <SkeletonRectangle width="100%" height={cardTopImageHeight} />
        {preset !== 'empty' && (
          <Box
            width="100%"
            height={cardFooterHeight}
            verticalAlign="middle"
            direction="vertical"
            gap="12px"
          >
            <SkeletonLine width="75%" />
            {preset === 'full' && <SkeletonLine width="60%" />}
            {preset === 'footer' && <SkeletonLine width="60%" />}
          </Box>
        )}
      </Box>
    </SkeletonGroup>
  );
}

export const SkeletonTopImageCard = observer(_SkeletonTopImageCard);