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

// figma node: 8471:12223 Tertiary + Circle (2 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "color=" + __venc(p.color) + '|' + "state=" + __venc(p.state);

export function TertiaryCircle(_p = {}) {
  const props = { ..._p, color: _p.color ?? "dark", state: _p.state ?? "default" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 32,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "var(--button-tertiary-default-text-2)",
        flexShrink: 0,
      }}>{props.text1 ?? "Text Link"}</span>
      <div style={{
          position: "relative",
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Button5 shape={"circle"} state={"default"} type={"secondary"} icon={"no icon"} size={"sm"} />}</div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 32,
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-8-2) * 1px)",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 12,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "12px",
        color: "rgba(56,29,15,0.88)",
        flexShrink: 0,
      }}>{props.text1 ?? "Text Link"}</span>
      <div style={{
          position: "relative",
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Button5 shape={"circle"} state={"hover"} type={"secondary"} icon={"no icon"} size={"sm"} />}</div>
    </div>
  );
  const __impls = {
    // figma: Color=Dark, State=Default
    "color=dark|state=default": __body0,
    // figma: Color=Dark, State=Hover
    "color=dark|state=hover": __body1,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default TertiaryCircle;
