import { IconTrash } from '@tabler/icons-solidjs'
import { Show } from 'solid-js'

export default function AreaItem(props) {
  return (
    <div class="flex justify-between items-center shadow rounded-lg p-3 border border-gray-300">
      <div class="">
        <span class="text-md font-bold">{props.name}</span>
        <p class="text-xs">{props.description}</p>
        <input
          type="hidden"
          name={`${props.name}.${props.key}.name`}
          value={props.name}
        />
        <input
          type="hidden"
          name={`${props.name}.${props.key}.desc`}
          value={props.description}
        />
      </div>
      <Show when={props.onDelete}>
        <button
          type="button"
          class="btn btn-circle btn-ghost btn-sm text-red-500 hover:bg-red-100"
          onClick={() => props.onDelete(props.key)}
        >
          <IconTrash size={20} />
        </button>
      </Show>
    </div>
  )
}
