import {
  Box,
  Card,
  CardProps,
  SkeletonGroup,
  SkeletonLine,
} from '@wix/design-system';
import { classes, st } from './SkeletonCard.st.css.js';
import React from 'react';

export interface SkeletonCardProps extends CardProps {
  minHeight?: string;
}
export function SkeletonCard(props: SkeletonCardProps) {
  const { minHeight = '24px', ...rest } = props;
  return (
    <Card {...rest}>
      <Card.Header
        dataHook="skeleton-card-header"
        className={st(classes.headerLoading)}
        title={
          <Box direction="vertical" width="100%">
            <SkeletonGroup>
              <SkeletonLine width="20%" marginBottom="SP1" />
            </SkeletonGroup>
          </Box>
        }
        subtitle={
          <Box direction="vertical" width="100%">
            <SkeletonGroup>
              <SkeletonLine width="35%" />
            </SkeletonGroup>
          </Box>
        }
      />
      <Card.Divider />
      <Card.Content dataHook="skeleton-card-content">
        <Box minHeight={minHeight}></Box>
      </Card.Content>
    </Card>
  );
}