import { cn } from "#lib/utils.ts";
import { nativeSelect as styles } from "./classes.ts";

export interface Input extends Omit<Marko.Input<"select">, "size"> {
  size?: "sm" | "default";
}

<const/{ size = "default", class: className, content, ...rest }=input/>

<div class=cn(styles.wrapper, className) data-slot="native-select-wrapper" data-size=size>
  <select
    ...rest
    data-slot="native-select"
    data-size=size
    class=styles.select
  >
    <${content}/>
  </select>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class=styles.icon
    aria-hidden="true"
    data-slot="native-select-icon"
  >
    <path d="m6 9 6 6 6-6"/>
  </svg>
</div>