import React from "react";
import { ensureStyle, ensureControlBase } from "./controlBase";

ensureControlBase();
ensureStyle("at-select", `
  .at-select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:28px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806A77' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
`);

export function Select({ error = false, className = "", children, ...rest }) {
  const cls = ["at-control", "at-select", error ? "is-error" : "", className].filter(Boolean).join(" ");
  return (
    <select className={cls} aria-invalid={error ? "true" : undefined} {...rest}>
      {children}
    </select>
  );
}