import React, { useState } from 'react';
import { StoryFn, Meta } from '@storybook/react';
import SourceDropdown from './SourceDropdown';
import sampleSources from '../__mocks__/sample-sources.json';
import { ResourceBrowserSource } from '../types';

export default {
    title: 'Source dropdown',
    component: SourceDropdown,
} as Meta<typeof SourceDropdown>;

const Template: StoryFn<typeof SourceDropdown> = (props) => {
    const sources = sampleSources as ResourceBrowserSource[];

    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource>(sources[0]);

    return (
        <div className="m-3 w-[200px]">
            <SourceDropdown
                selectedSource={selectedSource}
                sources={sources}
                onSourceSelect={(source) => setSelectedSource(source)}
            ></SourceDropdown>
        </div>
    );
};

export const Primary = Template.bind({});
Primary.args = {};