Select

'use client';
import { useState } from 'react';
import {
  Select,
  Avatar,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  type SelectSize,
} from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "size": "md",
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['option A', 'option B', 'option C'];
  return (
    <div style={{ width: 240, maxWidth: '100%' }}>
      <Select
        value={value}
        onValueChange={setValue}
        disabled={settings.disabled}
      >
        <SelectTrigger
          leadingIcon={
            settings.leadingIcon ? (
              <span aria-hidden="true" style={{ display: 'flex' }}>
                <Avatar
                  size="sm"
                  label={items[Number(value)]}
                  initials={items[Number(value)].slice(-1)}
                />
              </span>
            ) : undefined
          }
          size={settings.size as SelectSize}
          aria-label={"Choose an option"}
          style={{ width: '100%' }}
        >
          <SelectValue placeholder={"Choose an option"} />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {items.map((label, index) => (
              <SelectItem
                key={index}
                value={String(index)}
                size={settings.size as SelectSize}
                leadingIcon={
                  settings.leadingIcon ? (
                    <span aria-hidden="true" style={{ display: 'flex' }}>
                      <Avatar
                        size="sm"
                        label={label}
                        initials={label.slice(-1)}
                      />
                    </span>
                  ) : undefined
                }
              >
                {label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}