import React, { SelectHTMLAttributes } from 'react';
import cx from 'classnames';
import { CaretIcon } from '../../../icons/CaretIcon';

export function Select({
  id,
  className = '',
  children,
  ...rest
}: SelectHTMLAttributes<HTMLSelectElement>) {
  const classNames = cx(`select-input`, className);

  return (
    <div className="select button-base button-secondary button-base-md">
      <select id={id} className={classNames} {...rest}>
        {children}
      </select>
      <div className="focus" />
      <div className="caret">
        <CaretIcon className="fill-blue-primary dark:fill-yellow-primary" />
      </div>
    </div>
  );
}
