import {
    Button,
    Card,
    Flex,
    MultiSelectFieldSync,
    SelectFieldSync,
    SelectMenuSync,
} from '@servicetitan/anvil2';

import { FC } from 'react';
import '../anvil2.css';


const options = [
    { id: 1, label: "Option One" },
    { id: 2, label: "Option Two" },
    { id: 3, label: "Option Three" },
];

export const SelectCard: FC<{ className?: string }> = ({ className }) => (
    <Card className={className}>
        <Flex direction="column" rowGap={3}>
            <div style={{ width: '300px' }}>
                <MultiSelectFieldSync
                    label="Select options"
                    placeholder="Search options..."
                    options={options}
                    value={[]}
                    onSelectedOptionsChange={() => {}}
                />
            </div>

            <SelectFieldSync
                label="Select an option"
                placeholder="Search options..."
                options={options}
                value={null}
                onSelectedOptionChange={() => {}}
            />

            <SelectMenuSync
                label="Options"
                options={options}
                value={null}
                onSelectedOptionChange={() => {}}
                trigger={(props) => (
                    <Button {...props}>Select an option</Button>
                )}
            />
        </Flex>
    </Card>
);