import React from "react";
import PropTypes from "prop-types";
import {
  LeftPart,
  RightPart,
  SkeletonAuthor,
  SkeletonColumnContainer,
  SkeletonDescription,
  SkeletonDescriptionLine,
  SkeletonDetail,
  SkeletonExchangeButton,
  SkeletonExchangeLine,
  SkeletonGroup,
  SkeletonImage,
  SkeletonLocation,
  SkeletonMessageButton,
  SkeletonOfferCardContainer,
  SkeletonRowGroup,
  SkeletonTitle,
  SpreadLine,
} from "./SkeletonOfferCard.styled";

const SkeletonOfferCard = (props) => {
  return (
    <SkeletonOfferCardContainer skeleton={props.skeleton} animationStage={props.animationStage}>
      <LeftPart animationStage={props.animationStage}>
        <SkeletonImage animationStage={props.animationStage} />
        <SkeletonColumnContainer animationStage={props.animationStage}>
          <SkeletonTitle animationStage={props.animationStage} />
          <SkeletonGroup animationStage={props.animationStage}>
            <SkeletonAuthor animationStage={props.animationStage} />
            <SkeletonLocation animationStage={props.animationStage} />
          </SkeletonGroup>
          <SkeletonRowGroup animationStage={props.animationStage}>
            <SkeletonDetail animationStage={props.animationStage} />
            <SkeletonDetail animationStage={props.animationStage} />
            <SkeletonDetail animationStage={props.animationStage} />
          </SkeletonRowGroup>
        </SkeletonColumnContainer>
      </LeftPart>
      <SpreadLine />
      <RightPart animationStage={props.animationStage}>
        <SkeletonDescription animationStage={props.animationStage} />
        <SkeletonDescriptionLine animationStage={props.animationStage} />
        <SkeletonDescriptionLine animationStage={props.animationStage} />
        <SkeletonDescriptionLine animationStage={props.animationStage} />
        <SkeletonDescriptionLine animationStage={props.animationStage} />
      </RightPart>
      <SkeletonExchangeButton animationStage={props.animationStage}>
        <SkeletonExchangeLine animationStage={props.animationStage} />
      </SkeletonExchangeButton>
      <SkeletonMessageButton />
    </SkeletonOfferCardContainer>
  );
};

SkeletonOfferCard.propTypes = {
  children: PropTypes.node,
  skeleton: PropTypes.bool,
  animationStage: PropTypes.number,
};

export default SkeletonOfferCard;
