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

// figma node: 8471:12247 Tabs (4 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "where=" + __venc(p.where);

export function Tabs(_p = {}) {
  const props = { ..._p, where: _p.where ?? "on base" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 24,
      backgroundColor: "var(--background-lift-2)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "8px 8px 8px 8px",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 63,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Button5 text1={"Tab 1"} shape={"rectangle"} state={"hover"} type={"secondary"} icon={"no icon"} size={"sm"} />}</div>
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 2"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 3"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 74,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 4"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 5"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 24,
      backgroundColor: "var(--background-base-5)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "8px 8px 8px 8px",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 63,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Button5 text1={"Tab 1"} shape={"rectangle"} state={"hover"} type={"secondary"} icon={"no icon"} size={"sm"} />}</div>
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 2"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 3"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 74,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 4"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 5"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: "fit-content",
      borderRadius: 24,
      backgroundColor: "rgba(246,243,240,0.48)",
      display: "flex",
      flexDirection: "row",
      gap: "calc(var(--spacing-4-2) * 1px)",
      padding: "8px 8px 8px 8px",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      paddingLeft: "calc(var(--spacing-8-2) * 1px)",
      paddingTop: "calc(var(--spacing-8-2) * 1px)",
      paddingRight: "calc(var(--spacing-8-2) * 1px)",
      paddingBottom: "calc(var(--spacing-8-2) * 1px)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
          position: "relative",
          width: 63,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}>{props.icon1 ?? <Button5 text1={"Tab 1"} shape={"rectangle"} state={"hover"} type={"secondary"} icon={"no icon"} size={"sm"} />}</div>
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 2"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 3"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 74,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 4"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
      <Button5
        style={{
          position: "relative",
          width: 73,
          flexShrink: 0,
          alignSelf: "stretch",
          height: "auto",
        }}
        text1={"Tab 5"}
        shape={"rectangle"}
        state={"default"}
        type={"secondary"}
        icon={"no icon"}
        size={"sm"}
      />
    </div>
  );
  const __impls = {
    // figma: Where=On Base
    "where=on base": __body0,
    // figma: Where=On Lift
    "where=on lift": __body1,
    // figma: Where=On Depth
    "where=on depth": __body0,
    // figma: Where=On Image
    "where=on image": __body2,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Tabs;
