<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import SearchBar from './SearchBar.svelte';

const { Story } = defineMeta({
    title: 'Shared/SearchBar',
    tags: ['autodocs'],
    parameters: {
        docs: {
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
});
</script>

<script lang="ts">
let value = $state('');
</script>

<Story name="Default">
    <SearchBar bind:value={value} placeholder="Type here...">
        Here will be the search result
        <br />
        Popover closes only when the user clicks outside the search bar or presses the Escape key.
    </SearchBar>
</Story>
