import { Select, SelectItem } from '@nextui-org/react'
import styles from './QSelect.module.css'
import { useEffect } from 'react'

const animals = [
  { key: 'cat', label: 'Cat' },
  { key: 'dog', label: 'Dog' },
  { key: 'elephant', label: 'Elephant' },
  { key: 'lion', label: 'Lion' },
  { key: 'tiger', label: 'Tiger' },
  { key: 'giraffe', label: 'Giraffe' },
  { key: 'dolphin', label: 'Dolphin' },
  { key: 'penguin', label: 'Penguin' },
  { key: 'zebra', label: 'Zebra' },
  { key: 'shark', label: 'Shark' },
  { key: 'whale', label: 'Whale' },
  { key: 'otter', label: 'Otter' },
  { key: 'crocodile', label: 'Crocodile' },
]

export default function QSelect() {
  useEffect(() => {}, [])
  return (
    <>
      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
        <Select label="Select an animal" className="max-w-xs">
          {animals.map((animal) => (
            <SelectItem key={animal.key}>{animal.label}</SelectItem>
          ))}
        </Select>
      </div>
      <div className={styles.test}>test</div>
    </>
  )
}