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

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

const HomeIcon = (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-9Z" strokeLinejoin="round" />
  </svg>
);
const ListIcon = (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" strokeLinecap="round" />
  </svg>
);
const CarIcon = (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M4 16v-3l2-5h12l2 5v3M4 16h16M4 16v2M20 16v2M7 19v-2M17 19v-2" strokeLinejoin="round" />
  </svg>
);
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 items = [
  { key: "home", label: "Übersicht", icon: HomeIcon },
  { key: "trips", label: "Fahrten", icon: ListIcon },
  { key: "car", label: "Fahrzeug", icon: CarIcon },
  { key: "settings", label: "Einstellungen", icon: GearIcon },
];

export function Default() {
  const [active, setActive] = React.useState("home");
  return (
    <Root>
      <div style={{ width: 340 }}>
        <TabBar items={items} activeKey={active} onChange={setActive} />
      </div>
    </Root>
  );
}

export function IconOnly() {
  const [active, setActive] = React.useState("trips");
  return (
    <Root>
      <div style={{ width: 220 }}>
        <TabBar items={items} activeKey={active} onChange={setActive} iconOnly />
      </div>
    </Root>
  );
}
