import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { ChevronDownIcon } from '../icons';
import { InputContainer, InputContainerProps } from '../input-container';
import * as css from './select-button.css';

/*-- Types --*/

export interface SelectButtonProps
  extends InputContainerProps,
    css.ButtonVariants {}

/*-- Main --*/

const defaultEndAddon = <ChevronDownIcon size="sm" />;

export const SelectButton = forwardRef<'button', SelectButtonProps>(
  function SelectButton(
    {
      as = 'button',
      endAddon = defaultEndAddon,
      className,
      width,
      children,
      ...rest
    },
    ref,
  ) {
    const cn = clsx(className, css.button({ width }));

    return (
      <InputContainer
        ref={ref}
        as={as}
        className={cn}
        endAddon={endAddon}
        {...rest}
      >
        <div className={css.text}>{children}</div>
      </InputContainer>
    );
  },
);