import React from "react";
import PropTypes from "prop-types";
import {
  SkeletonFilterCardContainer,
  SkeletonHeader,
  SkeletonHeaderLineOne,
  SkeletonHeaderLineSecond,
} from "./SkeletonFilterCard.styled";
import SkeletonChooserHeader from "./SkeletonChooserHeader/SkeletonChooserHeader";
import SkeletonChooserTitle from "./SkeletonChooserTitle/SkeletonChooserTitle";
import SkeletonSection from "./SkeletonSection/SkeletonSection";

const SkeletonFilterCard = (props) => {

  return (
    <SkeletonFilterCardContainer animationStage={props.animationStage} skeleton={props.skeleton}>
      <SkeletonHeader>
        <SkeletonHeaderLineOne animationStage={props.animationStage}  />
        <SkeletonHeaderLineSecond animationStage={props.animationStage} />
      </SkeletonHeader>
      <SkeletonChooserHeader animationStage={props.animationStage}/>
      <SkeletonChooserTitle animationStage={props.animationStage} />
      <SkeletonSection numberOfOptions={14} animationStage={props.animationStage} />
      <SkeletonChooserHeader animationStage={props.animationStage} />
      <SkeletonChooserHeader animationStage={props.animationStage} />
      <SkeletonChooserTitle animationStage={props.animationStage} />
      <SkeletonSection numberOfOptions={3} animationStage={props.animationStage} />
      <SkeletonChooserTitle center animationStage={props.animationStage} />
    </SkeletonFilterCardContainer>
  );
};

SkeletonFilterCard.propTypes = {
  children: PropTypes.any,
  animationStage: PropTypes.number,
  skeleton: PropTypes.bool,
};

export default SkeletonFilterCard;
