import * as React from "react";
import { InboxIcon } from "lucide-react";

import { Typography } from "@/components/ui/typography";
import { cn } from "@/lib/utils";

interface EmptyStateProps {
  /** Icon shown inside the light circle — defaults to an inbox */
  icon?: React.ReactNode;
  /** Already-translated title — pass `t("...")` */
  title: React.ReactNode;
  /** Already-translated supporting text */
  description?: React.ReactNode;
  /** Optional call-to-action (e.g. a full-width <Button>) */
  action?: React.ReactNode;
  /**
   * `default` for full content areas; `sm` for tight surfaces (dialogs, bottom
   * sheets, small panels) where the full-size badge would dominate.
   */
  size?: "default" | "sm";
  className?: string;
}

/**
 * Empty placeholder per the Figma spec: sky-blue icon in a light circular
 * badge, title, secondary description, and an optional full-width action.
 * Used by lists, dashboards, dialogs, and the DataTable's default empty view.
 */
function EmptyState({
  icon,
  title,
  description,
  action,
  size = "default",
  className,
}: EmptyStateProps) {
  const compact = size === "sm";

  return (
    <div
      data-slot="empty-state"
      data-size={size}
      className={cn(
        "flex w-full flex-col items-center justify-center gap-2 px-4 text-center",
        compact ? "py-6" : "py-10",
        className,
      )}
    >
      <div
        className={cn(
          "flex items-center justify-center rounded-full bg-information-light text-primary-sky-blue",
          compact
            ? "mb-2 size-20 [&_svg:not([class*='size-'])]:size-8"
            : "mb-4 size-36 [&_svg:not([class*='size-'])]:size-14",
        )}
      >
        {icon ?? <InboxIcon strokeWidth={1.5} />}
      </div>
      <Typography as="h3" variant={compact ? "h3" : "h2"}>
        {title}
      </Typography>
      {description && (
        <Typography as="p" variant="body" color="secondary">
          {description}
        </Typography>
      )}
      {action && (
        <div className={cn("w-full max-w-sm", compact ? "mt-2" : "mt-4")}>
          {action}
        </div>
      )}
    </div>
  );
}

export { EmptyState };