import { Button } from '@kuppwest/apple-clean';

const row = { display: 'flex', gap: 16, flexWrap: 'wrap' as const, alignItems: 'center', padding: 24 };

export function Primary() {
  return (
    <div style={row}>
      <Button href="#kwac-fahrzeuge">Kompatibilität prüfen</Button>
      <Button href="#kwac-daten">Dieses Set ansehen</Button>
    </div>
  );
}

export function Ghost() {
  return (
    <div style={row}>
      <Button variant="ghost" href="#kwac-angebote">Varianten vergleichen</Button>
      <Button variant="ghost" href="#kwac-daten">Technische Daten</Button>
    </div>
  );
}

export function PrimaryAndGhost() {
  return (
    <div style={row}>
      <Button href="#kwac-fahrzeuge">Kompatibilität prüfen</Button>
      <Button variant="ghost" href="#kwac-angebote">Varianten vergleichen</Button>
    </div>
  );
}

export function Compact() {
  return (
    <div style={row}>
      <Button size="compact" href="#kwac-fahrzeuge">Kompatibilität prüfen</Button>
      <Button size="compact" href="#kwac-angebote">Angebot anzeigen</Button>
    </div>
  );
}