import type { Component } from 'solid-js';
import { Show } from 'solid-js';
import { FiChevronLeft, FiChevronRight } from 'solid-icons/fi';
import type { PaginationProps } from '@globalInterfaces';

interface Props {
  page: PaginationProps;
}

const Pagination: Component<Props> = (props) => {
  const isPrevDisabled = () => !props.page.url.prev;
  const isNextDisabled = () => !props.page.url.next;

  return (
    <Show when={props.page.lastPage > 1}>
      <nav
        class="mt-12 flex items-center justify-center gap-6 border-t border-neutral-200 pt-8 dark:border-neutral-800"
        aria-label="Навигация по страницам"
      >
        {/* Кнопка "Назад" */}
        <a
          href={props.page.url.prev}
          classList={{
            'flex items-center justify-center h-10 w-10 rounded-full border transition-all duration-300': true,
            'border-neutral-300 bg-neutral-100 text-neutral-400 cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-600': isPrevDisabled(),
            'border-neutral-300 bg-white text-neutral-700 shadow-sm hover:bg-neutral-50 hover:shadow-md active:scale-95 dark:bg-neutral-800 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700': !isPrevDisabled(),
          }}
          aria-disabled={isPrevDisabled()}
          aria-label="Перейти на предыдущую страницу"
        >
          <FiChevronLeft class="h-5 w-5" />
        </a>

        {/* Индикатор текущей страницы */}
        <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
          Страница <span class="font-semibold text-blue-600 dark:text-blue-400">{props.page.currentPage}</span> из {props.page.lastPage}
        </span>

        {/* Кнопка "Вперед" */}
        <a
          href={props.page.url.next}
          classList={{
            'flex items-center justify-center h-10 w-10 rounded-full border transition-all duration-300': true,
            'border-neutral-300 bg-neutral-100 text-neutral-400 cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-600': isNextDisabled(),
            'border-neutral-300 bg-white text-neutral-700 shadow-sm hover:bg-neutral-50 hover:shadow-md active:scale-95 dark:bg-neutral-800 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700': !isNextDisabled(),
          }}
          aria-disabled={isNextDisabled()}
          aria-label="Перейти на следующую страницу"
        >
          <FiChevronRight class="h-5 w-5" />
        </a>
      </nav>
    </Show>
  );
};

export default Pagination;