import React from "react";
import ContentLoader, { Rect } from "react-content-loader/native";
import { View } from "react-native";
import {Size} from '../_util'

export const CardSkeleton: React.FC = (props) => (
  <ContentLoader
    speed={2}
      // @ts-ignore
    width={345}
    height={174}
    viewBox='0 0 345 174'
    backgroundColor='#f3f3f3'
    foregroundColor='#ecebeb'
    {...props}>
    <Rect x='126' y='45' rx='3' ry='3' width='207' height='20' />
    <Rect x='126' y='10' rx='3' ry='3' width='207' height='20' />
    <Rect x='10' y='10' rx='0' ry='0' width='96' height='96' />
    <Rect x='126' y='80' rx='3' ry='3' width='207' height='20' />
    <Rect x='126' y='115' rx='3' ry='3' width='207' height='20' />
    <Rect x='126' y='150' rx='3' ry='3' width='207' height='20' />
  </ContentLoader>
);

export const CardSkeletonList: React.FC<{ num: number }> = ({ num = 2 }) => {
  let list = [] as typeof CardSkeleton[];
  for (let i = 0; i < num; i++) {
    list.push(CardSkeleton);
  }
  return (
    <View style={{ backgroundColor: '#ffffff' }}>
      {list.map((S, i) => (
        <S key={i} />
      ))}
    </View>
  );
};

export const Detailkeleton: React.FC = (props) => (
  <ContentLoader
    speed={2}
      // @ts-ignore
    width={340}
    height={84}
    viewBox='0 0 340 84'
    backgroundColor='#f3f3f3'
    foregroundColor='#ecebeb'
    {...props}>
    <Rect x='0' y='0' rx='3' ry='3' width='200' height='11' />
    <Rect x='110' y='48' rx='3' ry='3' width='53' height='11' />
    <Rect x='180' y='48' rx='3' ry='3' width='72' height='11' />
    <Rect x='0' y='48' rx='3' ry='3' width='100' height='11' />
    <Rect x='0' y='72' rx='3' ry='3' width='240' height='11' />
    <Rect x='0' y='23' rx='3' ry='3' width='60' height='11' />
    <Rect x='80' y='23' rx='3' ry='3' width='40' height='11' />
    <Rect x='130' y='23' rx='3' ry='3' width='120' height='11' />
  </ContentLoader>
);