import { Button } from './Button.jsx';

// figma node: 8093:9255 Arrows (1 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "type=" + __venc(p.type);

export function Arrows(_p = {}) {
  const props = { ..._p, type: _p.type ?? "default" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-12) * 1px)",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        borderRadius: 24,
        backgroundColor: "rgba(56,29,15,0.04)",
        backdropFilter: "blur(16px)",
        boxShadow: "inset 0 0 0 1px rgba(56,29,15,0)",
        display: "flex",
        flexDirection: "row",
        gap: "calc(var(--spacing-8) * 1px)",
        padding: "12px 12px 12px 12px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        paddingLeft: "calc(var(--spacing-12) * 1px)",
        paddingTop: "calc(var(--spacing-12) * 1px)",
        paddingRight: "calc(var(--spacing-12) * 1px)",
        paddingBottom: "calc(var(--spacing-12) * 1px)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          width: "calc(var(--icon-size-medium) * 1px)",
          overflow: "hidden",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <svg width={11.667} height={11.667} viewBox="0 0 11.667 11.667" fill="none" style={{
            position: "absolute",
            left: 4.167,
            top: 4.167,
            width: 11.667,
            height: 11.667,
            borderWidth: "calc(var(--icon-stroke) * 1px)",
            color: "var(--tone-strong)",
          }}>
            <path d={"M 5.303 12.197 C 5.596 12.49 6.071 12.49 6.364 12.197 C 6.657 11.904 6.657 11.429 6.364 11.136 L 5.833 11.667 L 5.303 12.197 Z M 0 5.833 L -0.53 5.303 C -0.823 5.596 -0.823 6.071 -0.53 6.364 L 0 5.833 Z M 6.364 0.53 C 6.657 0.237 6.657 -0.237 6.364 -0.53 C 6.071 -0.823 5.596 -0.823 5.303 -0.53 L 5.833 0 L 6.364 0.53 Z M 11.667 6.583 C 12.081 6.583 12.417 6.248 12.417 5.833 C 12.417 5.419 12.081 5.083 11.667 5.083 L 11.667 5.833 L 11.667 6.583 Z M 5.833 11.667 L 6.364 11.136 L 0.53 5.303 L 0 5.833 L -0.53 6.364 L 5.303 12.197 L 5.833 11.667 Z M 0 5.833 L 0.53 6.364 L 6.364 0.53 L 5.833 0 L 5.303 -0.53 L -0.53 5.303 L 0 5.833 Z M 11.667 5.833 L 11.667 5.083 L 0 5.083 L 0 5.833 L 0 6.583 L 11.667 6.583 L 11.667 5.833 Z"} fill="currentColor" fillRule="nonzero" />
          </svg>
        </div>
      </div>
      <div style={{
          position: "relative",
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon2 ?? <Button shape={"circle"} state={"default"} type={"secondary"} icon={"no icon"} size={"lg"} />}</div>
    </div>
  );
  const __impls = {
    // figma: Type=Default
    "type=default": __body0,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Arrows;
