import React, { useState } from 'react';
import { Select, Option } from './react';
export default {
    title: 'Forms/Select',
    render(args) {
        return (React.createElement(Select, { ...args },
            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
            React.createElement(Option, { value: "cloudberries" }, "Cloudberries")));
    },
    component: Select,
};
export const Default = {
    args: {
        label: 'Berries',
    },
};
export const ChangeEvent = (args) => {
    const [selectedValue, setSelectedValue] = useState('');
    return (React.createElement(React.Fragment, null,
        React.createElement("div", null,
            "Selected Value: ",
            selectedValue),
        React.createElement(Select, { ...args, onChange: (e) => setSelectedValue(e.detail) },
            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
            React.createElement(Option, { value: "cloudberries" }, "Cloudberries"))));
};
