/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { ViewVerticalStackIllustration, WorkItemVerticalStackIllustration } from "@plane/propel/empty-state";
import { cn } from "@plane/utils";

type Props = {
  title: string;
  description?: string;
  compact?: boolean;
};

export const ExternalContoursEmptyState = (props: Props) => {
  const { title, description, compact = false } = props;
  const Illustration = compact ? WorkItemVerticalStackIllustration : ViewVerticalStackIllustration;

  return (
    <div
      className={cn(
        "nodedc-external-empty-state",
        compact ? "max-w-[24rem]" : "max-w-sm"
      )}
    >
      <div className={cn("nodedc-external-empty-media", compact ? "h-[7rem] w-[7rem]" : "h-[6rem] w-[6rem]")}>
        <Illustration className={cn("block shrink-0", compact ? "h-[6.4rem] w-auto" : "h-[5.5rem] w-auto")} />
      </div>
      <div className={cn("space-y-2", compact ? "max-w-[24rem]" : "max-w-sm")}>
        <h3 className={cn("font-semibold text-primary", compact ? "text-18" : "text-18")}>{title}</h3>
        {description && (
          <p className={cn("mx-auto text-13 leading-6 text-secondary", compact ? "max-w-[24rem]" : "max-w-sm")}>
            {description}
          </p>
        )}
      </div>
    </div>
  );
};