import * as React from "react";
import { Pill } 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>
  );
}

export function Default() {
  return (
    <Root>
      <div style={{ display: "flex", gap: 8 }}>
        <Pill>Elektro</Pill>
        <Pill>Automatik</Pill>
        <Pill>5 Sitze</Pill>
      </div>
    </Root>
  );
}

export function Work() {
  return (
    <Root>
      <div style={{ display: "flex", gap: 8 }}>
        <Pill variant="work">Neu</Pill>
        <Pill variant="work">-15%</Pill>
      </div>
    </Root>
  );
}

export function Mixed() {
  return (
    <Root>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <Pill>Diesel</Pill>
        <Pill variant="work">SmartDeal</Pill>
        <Pill>4x4</Pill>
      </div>
    </Root>
  );
}