import * as React from "react";
import { IconButton } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
      {children}
    </div>
  );
}

const GearIcon = (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
    <circle cx="12" cy="12" r="3.2" />
    <path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
  </svg>
);

const BackIcon = (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M15 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const CloseIcon = (
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
  </svg>
);

export function Default() {
  return (
    <Root>
      <div style={{ display: "flex", gap: 12 }}>
        <IconButton aria-label="Zurück">{BackIcon}</IconButton>
        <IconButton aria-label="Einstellungen">{GearIcon}</IconButton>
        <IconButton aria-label="Schließen">{CloseIcon}</IconButton>
      </div>
    </Root>
  );
}

export function Disabled() {
  return (
    <Root>
      <div style={{ display: "flex", gap: 12 }}>
        <IconButton aria-label="Einstellungen" disabled>
          {GearIcon}
        </IconButton>
      </div>
    </Root>
  );
}
