import React from "react";
import { Label } from "semantic-ui-react";

export default ({
  provider_approved,
  client_approved_start,
  client_approved_end
}) => {
  const providerApproved = !!provider_approved;
  const clientApproved = !!client_approved_start && providerApproved;
  const providerRejected = !provider_approved && provider_approved !== null;
  const providerPending = provider_approved === null;
  return (
    <Label
      color={providerApproved ? "green" : providerRejected ? "red" : "grey"}
      tag
      size="small"
    >
      {!clientApproved && providerApproved && "Provider Approved Shift"}
      {clientApproved && "Client Approved Hours"}
      {providerPending && "Provider Approval Pending"}
      {providerRejected && "Provider Rejected Shift"}
    </Label>
  );
};