"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * Error State — https://app.subframe.com/f023064a5ca0/library?component=Error+State_07f75db5-d9ee-406e-8c83-cb9e3bf687ee
 */

import React from "react";
import * as SubframeUtils from "../../utils";
import { Button } from "../Button";

export interface ErrorStateRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  variant?: "inline" | "full-width";
  hideCancel?: boolean;
  title?: React.ReactNode;
  description?: React.ReactNode;
  retryLabel?: React.ReactNode;
  cancelLabel?: React.ReactNode;
  className?: string;
}

const ErrorStateRoot = React.forwardRef<HTMLDivElement, ErrorStateRootProps>(
  function ErrorStateRoot(
    {
      variant = "inline",
      hideCancel = false,
      title,
      description,
      retryLabel,
      cancelLabel,
      className,
      ...otherProps
    }: ErrorStateRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/07f75db5 flex min-w-[192px] max-w-[576px] flex-col items-start gap-2 rounded-md border-2 border-solid border-border-negative-solid bg-surface-feedback-subtle-negative px-4 py-4 shadow-sm group/error-state",
          { "w-full min-w-0 max-w-none": variant === "full-width" },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex w-full flex-col items-start gap-6">
          <div className="flex w-full items-center gap-2">
            <img
              className="h-1 w-1 flex-none object-cover"
              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTEgdy0xIGZsZXgtbm9uZSIgZGF0YS1ub2RlLWlkPSJjNWJhMzRjMCI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9IiNDNTIwMjAiPjwvY2lyY2xlPjwvc3ZnPg=="
            />
            {title ? (
              <span className="grow shrink-0 basis-0 whitespace-pre-wrap text-body-default-medium-0 font-body-default-medium-0 text-text-feedback-negative">
                {title}
              </span>
            ) : null}
          </div>
          <div className="flex flex-col items-start gap-6 pl-3">
            {description ? (
              <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary">
                {description}
              </span>
            ) : null}
            <div className="flex items-center gap-2">
              <Button variant="tertiary">{retryLabel}</Button>
              <Button
                className={SubframeUtils.twClassNames({ hidden: hideCancel })}
                variant="ghost"
              >
                {cancelLabel}
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
);

export const ErrorState = ErrorStateRoot;