"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * Partial page failure — https://app.subframe.com/f023064a5ca0/library?component=Partial+page+failure_db7ae858-338b-4089-8177-2dea8e3b97fe
 */

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

export interface PartialPageFailureRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "inline" | "full-width";
  className?: string;
}

const PartialPageFailureRoot = React.forwardRef<
  HTMLDivElement,
  PartialPageFailureRootProps
>(function PartialPageFailureRoot(
  { variant = "inline", className, ...otherProps }: PartialPageFailureRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/db7ae858 flex 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",
        { "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=="
          />
          <span className="grow shrink-0 basis-0 whitespace-pre-wrap text-body-default-medium-0 font-body-default-medium-0 text-text-feedback-negative">
            {"Failed to load"}
          </span>
        </div>
        <div className="flex flex-col items-start gap-6 pl-3">
          <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary">
            This section couldn&#39;t be loaded. Please try again.
          </span>
          <Button variant="tertiary">Retry</Button>
        </div>
      </div>
    </div>
  );
});

export const PartialPageFailure = PartialPageFailureRoot;