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

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

  return (
    <label class="form-control w-full [&:not(:last-child)]:pb-3">
      <div class="join join-vertical">
        <label
          class="label justify-start gap-2 bg-base-200 border border-gray-300 h-12 px-3 join-item"
          classList={{ 'border-red-500': props.error }}
        >
          <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>

        <textarea
          {...rest}
          class={`textarea textarea-bordered h-24 w-full resize-none join-item ${props.class || ''}`}
          classList={{ 'textarea-error': props.error }}
        />
      </div>
    </label>
  )
}
