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

import { Layers3 } from "lucide-react";
import { cn } from "@plane/utils";

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

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

  return (
    <div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
      <div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
        <Layers3 className={cn(compact ? "size-10" : "size-11")} strokeWidth={1.6} />
      </div>
      <div className="space-y-2">
        <h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
        {description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
      </div>
    </div>
  );
};