/** @jsxImportSource @emotion/react */

import tw, { styled } from 'twin.macro';

import { selectSizeStyle, selectVariantStyle } from './styles';
import { SelectProps } from './types';

const Select = styled.select(
  ({ sizing = 'md', variant = 'default' }: SelectProps) => {
    return [
      selectSizeStyle[sizing],
      selectVariantStyle[variant],

      tw`
      appearance-none 
      border border-solid 
      border-black 
      pr-10 
      flex items-center justify-start 
      font-sans
      transition duration-100 
      leading-none`,
      {
        backgroundImage:
          'url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%228%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201l6%206%206-6%22%20stroke%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")',
        backgroundPosition: 'bottom 50% right .5rem',
        backgroundRepeat: 'no-repeat',
      },
    ];
  },
);

export default Select;