import React from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import styles from './silke-card.scss';
import { ButtonContext } from '../silke-button';

type SilkeCardGridProps = {
  children: React.ReactNode;
  small?: boolean;
  loading?: boolean;
} & Omit<BoxDivProps, 'tag' | 'gap' | 'size'>;

export function SilkeCardGrid({
  loading,
  children,
  small,
  className,
  style = {},
  ...rest
}: SilkeCardGridProps) {
  let cl = styles.grid;
  if (className) cl += ' ' + className;
  if (small) cl += ' ' + styles.small;

  return (
    <SilkeBox wrap className={cl} {...rest} style={style}>
      {loading ? [1, 2, 3].map((key) => <SilkeSkeletonCard key={key} />) : children}
    </SilkeBox>
  );
}

export const SilkeSkeletonCard = React.forwardRef<HTMLDivElement, BoxDivProps>((props, ref) => {
  return (
    <SilkeBox column gap="s" className={styles.card} ref={ref} {...props}>
      <SilkeBox className={styles.imageWrapper} column bg="surface-2">
        <div className={styles.img} />
      </SilkeBox>
      <SilkeBox rounded="tiny" gap="m" column flex bg="surface-2" height="s" />
    </SilkeBox>
  );
});

SilkeSkeletonCard.displayName = 'SilkeSkeletonCard';