"use client";

import { DriveThroughButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  speed?: number;
  borderWidth?: number;
  autoDemo?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Start the lap",
  accent = "#F5C542",
  speed = 300,
  borderWidth = 6,
  autoDemo = true,
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <DriveThroughButton label={label} accent={accent} speed={speed} borderWidth={borderWidth} autoDemo={autoDemo} />
      <DriveThroughButton label="Next window" accent="#38BDF8" speed={speed} borderWidth={borderWidth} autoDemo={false} />
    </div>
  );
}

1d:T11ef, 1e:Te52a,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    speed?: number;
    borderWidth?: number;
    autoDemo?: boolean;
  }>(),
  {
    label: "Start the lap",
    accent: "#F5C542",
    speed: 300,
    borderWidth: 6,
    autoDemo: true,
  },
);

type Phase = "idle" | "engaged" | "exiting";

const phase = ref<Phase>("idle");
const reducedMotion = ref(false);
const interacted = ref(false);
const timers: number[] = [];
let mediaQuery: MediaQueryList | null = null;

function schedule(fn: () => void, delay: number) {
  const id = window.setTimeout(fn, delay);
  timers.push(id);
}

const travelMs = computed(() => (reducedMotion.value ? 10 : props.speed));

const easeClass = computed(() => `dtb__vehicle--${phase.value}`);
const showCaption = computed(() => phase.value === "idle");

function engage() {
  interacted.value = true;
  if (phase.value !== "exiting") phase.value = "engaged";
}

function disengage() {
  interacted.value = true;
  if (phase.value === "engaged") phase.value = "idle";
}

function activate() {
  interacted.value = true;
  if (phase.value === "exiting") return;
  phase.value = "exiting";
  schedule(() => {
    phase.value = "idle";
  }, travelMs.value);
}

onMounted(() => {
  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mediaQuery.matches;
  mediaQuery.addEventListener("change", () => {
    reducedMotion.value = mediaQuery!.matches;
  });

  if (props.autoDemo) {
    schedule(() => {
      if (!interacted.value) phase.value = "engaged";
    }, 900);
    schedule(() => {
      if (!interacted.value) phase.value = "exiting";
    }, 900 + travelMs.value + 550);
    schedule(() => {
      if (!interacted.value) phase.value = "idle";
    }, 900 + travelMs.value * 2 + 600);
  }
});

onBeforeUnmount(() => {
  timers.forEach((id) => window.clearTimeout(id));
});
</script>

<template>
  <button
    type="button"
    class="dtb"
    :aria-label="label"
    :style="{
      '--dtb-border': borderWidth + 'px',
      '--dtb-duration': travelMs + 'ms',
      '--dtb-outline-offset': borderWidth + 4 + 'px',
    }"
    @pointerenter="engage"
    @pointerleave="disengage"
    @focus="engage"
    @blur="disengage"
    @click="activate"
  >
    <span class="dtb__caption" :style="{ opacity: showCaption ? 1 : 0 }" aria-hidden="true">{{ label }}</span>
    <div class="dtb__track" aria-hidden="true">
      <div class="dtb__vehicle" :class="easeClass">
        <svg viewBox="0 0 120 54" width="50" height="23" aria-hidden="true" focusable="false">
          <path
            d="M8 44 L8 33 Q8 29 12 29 L33 29 L45 11 Q47 7 53 7 L79 7 Q85 7 88 11 L97 23 L108 23 Q114 23 114 29 L114 39 Q114 44 109 44 Z"
            :fill="accent"
          />
          <circle cx="29" cy="45" r="8" class="dtb__wheel" />
          <circle cx="93" cy="45" r="8" class="dtb__wheel" />
        </svg>
      </div>
    </div>
  </button>
</template>

<style scoped>
.dtb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 200px;
  height: 70px;
  padding-inline: 22px;
  border-style: double;
  border-width: var(--dtb-border, 6px);
  border-color: #eceff4;
  background: #0f1216;
  color: #eceff4;
  font: 20px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.dtb:focus-visible {
  outline: 2px solid #eceff4;
  outline-offset: var(--dtb-outline-offset, 10px);
}
.dtb:active {
  transform: scale(0.98);
}
.dtb__caption {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  text-align: center;
  transition: opacity 150ms ease;
}
.dtb__track {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtb__vehicle {
  width: 50px;
  height: 23px;
  transform: translateX(-760%);
  transition: transform var(--dtb-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.dtb__vehicle--engaged {
  transform: translateX(0%);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.dtb__vehicle--exiting {
  transform: translateX(760%);
  transition-timing-function: cubic-bezier(0.6, 0.04, 0.9, 0.35);
}
.dtb__wheel {
  fill: #0f1216;
}
@media (prefers-reduced-motion: reduce) {
  .dtb__caption,
  .dtb__vehicle {
    transition-duration: 1ms;
  }
}
</style>

Nearby