import {
  Illustration,
  TalentButtonWithIcon,
  Typography,
} from "@komi-app/components";
import { campaignCreateUrl } from "constants/dca";
import { Link } from "react-router-dom";
import When from "@komi-app/when";

export type EmptyListViewProps = {
  openModal: () => void;
  isSMSCampaignEnabled: boolean;
  isEmailVerified?: boolean;
};

const EmptyListView: React.FC<EmptyListViewProps> = ({
  openModal,
  isSMSCampaignEnabled,
  isEmailVerified = false,
}) => {
  return (
    <div className="campaigns-page__table-placeholder">
      <Illustration
        className="placeholder-illustration"
        name="empty-state"
        width={164}
      />

      <Typography.Heading className="placeholder-heading" level={4}>
        Nothing Here Yet
      </Typography.Heading>

      {isEmailVerified && (
        <Typography.Body className="placeholder-tagline" color="gray-700">
          Click the button below to get started
        </Typography.Body>
      )}

      <When
        value={isSMSCampaignEnabled}
        then={
          <TalentButtonWithIcon
            label="Create New Campaign"
            onClick={openModal}
            type="text"
            prefixIcon="addFilled"
          />
        }
        otherwise={
          isEmailVerified && (
            <Link
              className="placeholder-link"
              to={{
                pathname: campaignCreateUrl,
              }}
            >
              <TalentButtonWithIcon
                label="Create New Campaign"
                type="text"
                prefixIcon="addFilled"
              />
            </Link>
          )
        }
      />
    </div>
  );
};

export default EmptyListView;
