import {DropdownComponent as Dropdown} from './dropdown.component';
import type {Meta, StoryObj} from '@storybook/react';
import React from 'react';

const meta: Meta<typeof Dropdown> = {
    title: 'Molecules/Dropdown',
    component: Dropdown,
};
export default meta;

type Story = StoryObj<typeof Dropdown>;

const options = [
    {value: 'kendricklamar', label: 'Kendricklamar'},
    {value: 'jayz', label: 'Jayz'},
    {value: 'drdre', label: 'Drdre'},
    {value: 'nickiminaj', label: 'Nickiminaj'},
    {value: 'kanyewest', label: 'Kanyewest'},
    {value: 'lilwayne', label: 'Lilwayne'},
    {value: 'eminem', label: 'Eminem'},
    {value: 'snoopdogg', label: 'Snoopdogg'},
    {value: 'cardib', label: 'Cardib'},
    {value: 'travisscott', label: 'Travisscott'},
    {value: 'jcole', label: 'Jcole'},
    {value: 'postmalone', label: 'Postmalone'},
    {value: 'liluzivert', label: 'Liluzivert'},
    {value: 'future', label: 'Future'},
    {value: 'megtheestallion', label: 'Megtheestallion'},
    {value: 'drake', label: 'Drake'},
    {value: 'asaprocky', label: 'Asaprocky'},
    {value: 'megantheestallion', label: 'Megantheestallion'},
    {value: 'kodakblack', label: 'Kodakblack'},
    {value: 'lilbaby', label: 'Lilbaby'},
    {value: 'logic', label: 'Logic'},
    {value: 'guccimane', label: 'Guccimane'},
    {value: 'dababy', label: 'Dababy'},
    {value: 'tylerthecreator', label: 'Tylerthecreator'},
    {value: 'roddyricch', label: 'Roddyricch'},
    {value: 'offset', label: 'Offset'},
    {value: 'ludacris', label: 'Ludacris'},
    {value: 'badbunny', label: 'Badbunny'},
    {value: 'frenchmontana', label: 'Frenchmontana'},
    {value: 'chancetherapper', label: 'Chancetherapper'},
    {value: 'yogotti', label: 'Yogotti'},
    {value: 'meekmill', label: 'Meekmill'},
    {value: '21savage', label: '21savage'},
    {value: 'kidcudi', label: 'Kidcudi'},
    {value: 'denzelcurry', label: 'Denzelcurry'},
    {value: 'pushat', label: 'Pushat'},
    {value: 'bigsean', label: 'Bigsean'},
    {value: 'trippieredd', label: 'Trippieredd'},
    {value: 'yogottti', label: 'Yogottti'},
    {value: 'macklemore', label: 'Macklemore'},
    {value: 'florenceada', label: 'Florenceada'},
    {value: 'tydolla', label: 'Tydolla'},
    {value: 'aapferg', label: 'Aapferg'},
    {value: 'joynerlucas', label: 'Joynerlucas'},
    {value: 'liltunechi', label: 'Liltunechi'},
    {value: 'icecube', label: 'Icecube'},
    {value: 'biggie', label: 'Biggie'},
    {value: 'childishgambino', label: 'Childishgambino'},
    {value: 'drakeo', label: 'Drakeo'},
    {value: 'saweetie', label: 'Saweetie'},
    {value: 'theestallion', label: 'Theestallion'},
    {value: 'desiigner', label: 'Desiigner'},
    {value: 'joeybadass', label: 'Joeybadass'},
    {value: 'pushat', label: 'Pushat'},
];

export const Default: Story = {
    render: (args) => <Dropdown {...args} data-testid='enter-code' />,
    args: {
        options,
        placeholder: 'test',
        components: {
            InputStartAdornment: <div>test</div>,
        },
    },
};