import { IconInfoCircle } from '@tabler/icons-solidjs'
import { Show, splitProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'

export default function Textinput(props) {
  const [local, rest] = splitProps(props, ['label', 'icon'])

  return (
    <div class="form-control w-full [&:not(:last-child)]:pb-3">
      <div class="join join-vertical">
        <div
          class="flex items-center justify-between bg-base-200 border border-gray-300 h-12 px-3 join-item"
          classList={{ 'border-red-500': props.error }}
        >
          <label class="label justify-start gap-2 bg-base-200">
            <Show when={local.icon && local.label}>
              <Dynamic component={local.icon} size={18} />
              <span class="label-text font-bold whitespace-nowrap">
                {local.label}
              </span>
            </Show>
            <Show when={props.error}>
              <div
                class="tooltip tooltip-right tooltip-error before:text-white text-red-500"
                data-tip={props.error}
              >
                <IconInfoCircle size={18} />
              </div>
            </Show>
          </label>
          {props.children}
        </div>
        <input
          {...rest}
          class="input input-bordered w-full join-item"
          classList={{ 'input-error': props.error }}
        />
      </div>
    </div>
  )
}
