<script lang="ts">
  import type { HTMLInputAttributes } from "svelte/elements";

  interface Props extends Omit<HTMLInputAttributes, "value" | "size"> {
    variant?: "default" | "sheet";
    size?: "md" | "sm";
    value?: string | number | null;
    el?: HTMLInputElement | null;
  }

  let {
    variant = "default",
    size = "md",
    value = $bindable<string | number | null>(),
    el = $bindable(null),
    class: className = "",
    ...rest
  }: Props = $props();
</script>

<input
  bind:this={el}
  bind:value
  class="w-full {variant === 'sheet'
    ? 'bg-zinc-800'
    : 'bg-zinc-900'} border border-zinc-700 rounded-xl px-4 {size === 'sm'
    ? 'py-2.5'
    : 'py-3'} text-zinc-100 focus:outline-none focus:border-green-500 transition-colors {className}"
  {...rest}
/>
