import React from "react";

interface StyledSelectProps
  extends React.SelectHTMLAttributes<HTMLSelectElement> {
  arrowColor?: string;
}

const StyledSelect: React.FC<StyledSelectProps> = ({
  className,
  children,
  arrowColor,
  ...props
}) => {
  return (
    <div className={`relative ${className}`}>
      <select
        className="w-full appearance-none rounded-full border border-slate-300 bg-[#F8FAFC] py-2.5 px-6 text-right leading-tight text-slate-700 placeholder-slate-400 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-200"
        {...props}
      >
        {children}
      </select>
      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2 text-gray-700">
        <svg
          className={`h-5 w-5 fill-current ${arrowColor}`}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
        >
          <path d="M5.516 7.548c.436-.446 1.144-.446 1.584 0L10 10.42l2.9-2.872c.44-.446 1.148-.446 1.584 0 .44.446.44 1.152 0 1.596l-3.7 3.68c-.22.22-.512.33-.8.33s-.58-.11-.8-.33l-3.7-3.68c-.44-.446-.44-1.152 0-1.596z" />
        </svg>
      </div>
    </div>
  );
};

export default StyledSelect;