"use client";
/*
 * Documentation:
 * Banner Offline — https://app.subframe.com/f023064a5ca0/library?component=Banner+Offline_2582cb6e-0176-4a5c-b70f-c3bef3c7001d
 */

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

export interface BannerOfflineRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default";
  text?: React.ReactNode;
  className?: string;
}

const BannerOfflineRoot = React.forwardRef<
  HTMLDivElement,
  BannerOfflineRootProps
>(function BannerOfflineRoot(
  {
    variant = "default",
    text,
    className,
    ...otherProps
  }: BannerOfflineRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex w-full items-center gap-2 border-b border-solid border-border-warning-solid bg-surface-feedback-subtle-warning px-4 py-3",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <img
        className="h-1 w-1 flex-none object-cover"
        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSIjOUI1RTBEIi8+PC9zdmc+"
      />
      {text ? (
        <span className="grow shrink-0 basis-0 whitespace-pre-wrap text-body-default-regular-0 font-body-default-regular-0 text-text-feedback-warning">
          {text}
        </span>
      ) : null}
    </div>
  );
});

export const BannerOffline = BannerOfflineRoot;