"use client";
import { cva } from 'class-variance-authority';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var attachmentVariants = cva(
  [
    "group/attachment relative inline-flex items-center gap-[var(--gap-sm,0.5rem)] rounded-md border border-border bg-card",
    "transition-all duration-[var(--duration-normal,200ms)] ease-out"
  ].join(" "),
  {
    variants: {
      variant: {
        file: "px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] max-w-xs",
        image: "p-0 overflow-hidden"
      }
    },
    defaultVariants: { variant: "file" }
  }
);
function formatSize(bytes) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
function detectVariant(file) {
  const preview = "preview" in file ? file.preview : void 0;
  const isImage = file.type.startsWith("image/");
  return isImage && preview ? "image" : "file";
}
function resolvePreview(file) {
  return "preview" in file ? file.preview : void 0;
}
function Attachment({
  className,
  variant,
  file,
  onRemove,
  progress,
  ref,
  ...props
}) {
  const preview = resolvePreview(file);
  const detected = detectVariant(file);
  const resolvedVariant = variant === "image" && !preview ? "file" : variant ?? detected;
  const showProgress = typeof progress === "number" && progress >= 0 && progress < 1;
  const progressPercent = showProgress ? Math.round(progress * 100) : 0;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      className: cn(attachmentVariants({ variant: resolvedVariant }), className),
      ...props,
      children: [
        resolvedVariant === "image" && preview ? (
          // Intentional plain <img> (not next/image) — Attachment is
          // framework-agnostic. Consumers can swap in next/image at the
          // callsite when they want optimization.
          /* @__PURE__ */ jsx(
            "img",
            {
              src: preview,
              alt: file.name,
              className: "block h-20 w-20 object-cover"
            }
          )
        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: file.name }),
            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatSize(file.size) })
          ] })
        ] }),
        showProgress ? /* @__PURE__ */ jsx(
          "div",
          {
            role: "progressbar",
            "aria-valuemin": 0,
            "aria-valuemax": 100,
            "aria-valuenow": progressPercent,
            "aria-label": `Uploading ${file.name}`,
            className: "absolute inset-x-0 bottom-0 h-1 overflow-hidden rounded-b-md bg-muted",
            children: /* @__PURE__ */ jsx(
              "div",
              {
                className: "h-full bg-primary transition-[width] duration-[var(--duration-normal,200ms)] ease-out",
                style: { width: `${progressPercent}%` }
              }
            )
          }
        ) : null,
        onRemove ? /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: onRemove,
            "aria-label": `Remove ${file.name}`,
            className: cn(
              "absolute -right-2 -top-2 inline-flex h-5 w-5 items-center justify-center rounded-full",
              "bg-card border border-border text-foreground shadow-sm",
              "transition-all duration-[var(--duration-normal,200ms)] ease-out",
              "hover:bg-accent hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              "active:scale-[0.98]"
            ),
            children: /* @__PURE__ */ jsxs(
              "svg",
              {
                xmlns: "http://www.w3.org/2000/svg",
                viewBox: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                strokeWidth: "2.5",
                strokeLinecap: "round",
                strokeLinejoin: "round",
                className: "size-3",
                "aria-hidden": "true",
                children: [
                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                ]
              }
            )
          }
        ) : null
      ]
    }
  );
}
function FileIcon(props) {
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      "aria-hidden": "true",
      ...props,
      children: [
        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
      ]
    }
  );
}

export { Attachment, attachmentVariants };
//# sourceMappingURL=attachment.js.map
//# sourceMappingURL=attachment.js.map