"use client";
/*
 * Documentation:
 * Logo — https://app.subframe.com/f023064a5ca0/library?component=Logo_609493cb-7054-4018-bcb4-26d43de9ef41
 */

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

export interface LogoRootProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: "8" | "16" | "24" | "28" | "32" | "64" | "128";
  showIcon?: boolean;
  hideText?: boolean;
  className?: string;
}

const LogoRoot = React.forwardRef<HTMLDivElement, LogoRootProps>(function LogoRoot(
  { size = "28", showIcon = false, hideText = false, className, ...otherProps }: LogoRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/609493cb flex w-fit items-center justify-center gap-3",
        {
          "gap-6": size === "128",
          "gap-4": size === "64",
          "gap-2": size === "32",
          "gap-1": size === "16" || size === "8",
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <img
        className={SubframeUtils.twClassNames("hidden h-7 flex-none object-contain", {
          block: showIcon,
          "h-32": size === "128",
          "h-16": size === "64",
          "h-8": size === "32",
          "h-6": size === "24",
          "h-4": size === "16",
          "h-2": size === "8",
        })}
        src="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_302_142' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='84'%3E%3Cpath d='M0 0H96V83.12H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_302_142)'%3E%3Cpath d='M95.9449 41.52L83.9589 20.76L48.0009 41.52H71.9719L59.9869 62.281H36.0139L24.0279 41.52L36.0139 20.76H83.9589L74.3919 4.188L71.9719 0H24.0279L0.0549316 41.52L24.0279 83.042H71.9719L95.9449 41.52Z' fill='%23F1B729'/%3E%3C/g%3E%3C/svg%3E"
        alt={hideText ? "HiveGrid" : ""}
      />
      <img
        className={SubframeUtils.twClassNames("h-7 flex-none object-contain", {
          hidden: hideText,
          "h-32": size === "128",
          "h-16": size === "64",
          "h-8": size === "32",
          "h-6": size === "24",
          "h-4": size === "16",
          "h-2": size === "8",
        })}
        src="data:image/svg+xml,%3Csvg width='243' height='44' viewBox='3.4 3.6 243 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='123' height='55'%3E%3Cpath d='M122.88 0H0V55H122.88V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_15_21)'%3E%3Cpath d='M3.48022 8.81384H11.1272V22.1967H28.3362V8.81384H35.9831V42.2736H28.3362V28.8803H11.1285V42.2736H3.48022V8.81384Z' fill='%23111111'/%3E%3Cpath d='M42.4373 8.81384H50.0842V42.2736H42.4373V8.81384Z' fill='%23111111'/%3E%3Cpath d='M53.9084 12.6387V8.81519H61.0803L71.1187 34.8656H71.5978L81.6336 8.81519H88.8054V12.6387L76.3755 42.2736H66.3371L53.9084 12.6387Z' fill='%23111111'/%3E%3C/g%3E%3Cmask id='mask1_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='154' y='0' width='93' height='55'%3E%3Cpath d='M246.806 0H154.907V55H246.806V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_15_21)'%3E%3Cpath d='M197.555 8.78772H205.202V42.2462H197.555V8.78772Z' fill='%23111111'/%3E%3Cpath d='M211.657 8.78772H236.274C238.663 8.78772 240.575 9.50438 242.01 10.939C243.443 12.3736 244.161 14.286 244.161 16.6749V34.3603C244.161 36.7505 243.444 38.6616 242.01 40.0962C240.575 41.5308 238.663 42.2475 236.274 42.2475H211.657V8.78772ZM233.405 35.5547C235.478 35.5547 236.513 34.5196 236.513 32.4492V18.5873C236.513 16.5143 235.476 15.4791 233.405 15.4791H219.304V35.5547H233.405Z' fill='%23111111'/%3E%3C/g%3E%3Cpath d='M185.126 29.819C186.306 29.5958 187.374 29.1976 188.33 28.6246C189.157 28.1155 189.907 27.3753 190.576 26.4028C191.245 25.429 191.58 24.0988 191.58 22.4109V16.675C191.58 14.2861 190.864 12.3737 189.429 10.9391C187.994 9.50581 186.082 8.78784 183.693 8.78784H159.554V10.5501L168.179 25.5047L159.554 40.4135V42.2463H167.201V28.8948L174.939 28.8791L185.365 42.2463H192.297V38.4228L185.126 29.819ZM183.933 20.4985C183.933 22.5688 182.79 22.1968 180.718 22.1968H167.203V15.478H180.825C182.898 15.478 183.933 16.5144 183.933 18.5861V20.4985Z' fill='%23111111'/%3E%3Cpath d='M118.412 35.5797H100.041V28.8791H114.548L112.566 25.442L114.444 22.1968H100.041V15.5041H118.314L121.075 10.7329V8.81396H92.3943V42.2737H121.075V40.1968L118.412 35.5797Z' fill='%23111111'/%3E%3Cpath d='M165.334 25.3873L159.062 14.5213L140.242 25.3873H152.788L146.516 36.2521H133.968L127.696 25.3873L133.968 14.5213H159.062L154.054 5.84824L152.788 3.65649H127.696L115.15 25.3873L127.696 47.1181H152.788L165.334 25.3873Z' fill='%23F1B729'/%3E%3C/svg%3E"
        alt={showIcon ? "" : "HiveGrid"}
      />
    </div>
  );
});

export const Logo = LogoRoot;