<script module lang="ts">
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import ServiceRow from "../components/ServiceRow.svelte";
  import FocusPreview from "./FocusPreview.svelte";
  import { serviceRows } from "./story-data";

  const { Story } = defineMeta({
    title: "Dashboard Primitives/ServiceRow",
    component: ServiceRow,
    tags: ["autodocs"],
  });
</script>

<Story name="Normal" args={{ service: serviceRows.normal }} />
<Story name="Down" args={{ service: serviceRows.down }} />
<Story name="Degraded" args={{ service: serviceRows.degraded }} />
<Story name="Stale" args={{ service: serviceRows.stale }} />
<Story name="No Link" args={{ service: serviceRows.noLink }} />
<Story name="Long Title Description" args={{ service: serviceRows.long }} />
<Story name="Keyboard Focus" asChild>
  <FocusPreview selector="a">
    <ServiceRow service={serviceRows.normal} />
  </FocusPreview>
</Story>
