// components/card.ts
import type { VariantProps } from 'class-variance-authority';
import { cva, cx } from 'class-variance-authority';
import { cn } from '@/lib/utils';
/**
 * Box
 */
export type BoxProps = VariantProps<typeof box>;
export const box = cva(['box', 'box-border'], {
  variants: {
    margin: { 0: 'm-0', 2: 'm-2', 4: 'm-4', 8: 'm-8' },
    padding: { 0: 'p-0', 2: 'p-2', 4: 'p-4', 8: 'p-8' },
  },
  defaultVariants: {
    margin: 0,
    padding: 0,
  },
});

/**
 * Card
 */
type CardBaseProps = VariantProps<typeof cardBase>;
const cardBase = cva(['card', 'border-solid', 'border-slate-300', 'rounded'], {
  variants: {
    shadow: {
      md: 'drop-shadow-md',
      lg: 'drop-shadow-lg',
      xl: 'drop-shadow-xl',
    },
  },
});

export interface CardProps extends BoxProps, CardBaseProps {}
export const card = ({ margin, padding, shadow }: CardProps = {}) => cx(box({ margin, padding }), cardBase({ shadow }));

type CardBlankProps = {
  number?: number;
  className?: string;
};

/**
 * CardBlank 空的卡片，用于占位
 * @param props
 * @returns
 */
export const CardBlank = (props: CardBlankProps) => {
  const { number = 4, className } = props;
  return (
    <>
      {new Array(number).fill(0).map((_, index) => {
        return <div key={index} className={cn('w-[300px] shark-0', className)}></div>;
      })}
    </>
  );
};