<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Searcher from '@Holos/Searcher.vue';
import Adding from '@Holos/Button/ButtonRh.vue';
</script>

<template>
  <div class="p-6 max-w-auto mx-auto">
    <!-- Header -->
    <div class="flex items-start justify-between gap-4">
      <div>
        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">Empleados</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
      </div>

      <div>
        <Adding text="Nuevo Empleado" />
      </div>
    </div>

    <!-- Search Card -->
    <div class="mt-6">
      <Searcher
        title="Buscar Empleados"
        placeholder="Buscar por nombre o departamento..."
        @search="() => {}"
      >
      </Searcher>
    </div>

    <!-- List Card -->
    <div class="mt-8 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">Lista de Empleados</h3>
          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">3 empleados encontrados</p>
        </div>
      </div>

      <div class="mt-6 overflow-x-auto">
        <table class="w-full min-w-[900px]">
          <thead>
            <tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
              <th class="py-3 pb-4">Nombre Completo</th>
              <th class="py-3 pb-4">Departamento</th>
              <th class="py-3 pb-4">Sede</th>
              <th class="py-3 pb-4">Fecha Ingreso</th>
              <th class="py-3 pb-4">Estado</th>
              <th class="py-3 pb-4 text-right">Acciones</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
            <!-- Row 1 -->
            <tr class="bg-white dark:bg-transparent">
              <td class="py-6">
                <div class="font-semibold text-gray-800 dark:text-primary-dt">María González López</div>
                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">GOLM900515</div>
              </td>
              <td class="py-6 dark:text-primary-dt">Tecnología</td>
              <td class="py-6 dark:text-primary-dt">Ciudad de México</td>
              <td class="py-6 dark:text-primary-dt">2023-01-15</td>
              <td class="py-6">
                <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
              </td>
              <td class="py-6 text-right space-x-3">
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="visibility"
                  />
                </button>
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="edit"
                  />
                </button>
                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
                  <GoogleIcon 
                    class="text-red-500 dark:text-danger-d text-xl"
                    name="delete"
                  />
                </button>
              </td>
            </tr>

            <!-- Row 2 -->
            <tr class="bg-white dark:bg-transparent">
              <td class="py-6">
                <div class="font-semibold text-gray-800 dark:text-primary-dt">Carlos Rodríguez Martín</div>
                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">ROMC880822</div>
              </td>
              <td class="py-6 dark:text-primary-dt">Marketing</td>
              <td class="py-6 dark:text-primary-dt">Guadalajara</td>
              <td class="py-6 dark:text-primary-dt">2022-03-10</td>
              <td class="py-6">
                <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
              </td>
              <td class="py-6 text-right space-x-3">
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="visibility"
                  />
                </button>
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="edit"
                  />
                </button>
                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
                  <GoogleIcon 
                    class="text-red-500 dark:text-danger-d text-xl"
                    name="delete"
                  />
                </button>
              </td>
            </tr>

            <!-- Row 3 -->
            <tr class="bg-white dark:bg-transparent">
              <td class="py-6">
                <div class="font-semibold text-gray-800 dark:text-primary-dt">Ana Martínez Sánchez</div>
                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">MASA921203</div>
              </td>
              <td class="py-6 dark:text-primary-dt">Finanzas</td>
              <td class="py-6 dark:text-primary-dt">Monterrey</td>
              <td class="py-6 dark:text-primary-dt">2023-06-01</td>
              <td class="py-6">
                <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
              </td>
              <td class="py-6 text-right space-x-3">
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="visibility"
                  />
                </button>
                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
                  <GoogleIcon 
                    class="text-black dark:text-primary-dt text-xl"
                    name="edit"
                  />
                </button>
                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
                  <GoogleIcon 
                    class="text-red-500 dark:text-danger-d text-xl"
                    name="delete"
                  />
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>