"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * Timeout — https://app.subframe.com/f023064a5ca0/library?component=Timeout_ff21411f-6321-4139-bc92-603c625e2380
 */

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

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

const TimeoutRoot = React.forwardRef<HTMLDivElement, TimeoutRootProps>(
  function TimeoutRoot(
    { variant = "inline", className, ...otherProps }: TimeoutRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/ff21411f 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-regular-0 font-body-default-regular-0 text-text-feedback-negative">
              {"Request timed out"}
            </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">
              The server took too long to respond. Please try again.
            </span>
            <div className="flex items-center gap-2">
              <Button variant="tertiary">Retry</Button>
              <Button variant="ghost">Cancel</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
);

export const Timeout = TimeoutRoot;