'use client';
import { useScopedI18n } from '@/locales/client';
import { Button } from '@/components/ui/button';

interface NavigationProps {
  currentPage: number;
  totalPages: number;
  goToPage: (page: number) => void;
  onSubmit: () => void;
  isLastPage: boolean;
}

export function Navigation({
  currentPage,
  totalPages,
  goToPage,
  onSubmit,
  isLastPage,
}: NavigationProps) {
  const t = useScopedI18n('component.questionnaire.test.public.navigation');
  return (
    <div className="fixed inset-x-0 bottom-0 z-30 flex items-center justify-between gap-3 border-t bg-background/95 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] shadow-[0_-4px_16px_rgba(0,0,0,0.06)] backdrop-blur lg:static lg:mt-8 lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none lg:backdrop-blur-none">
      <Button
        variant="outline"
        className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm"
        onClick={() => goToPage(currentPage - 1)}
        disabled={currentPage === 1}
      >
        {t('previousPage')}
      </Button>

      <span className="shrink-0 text-xs text-gray-500 sm:text-sm">
        {t('pageInfo', { currentPage, totalPages })}
      </span>

      {isLastPage ? (
        <Button className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm" onClick={onSubmit}>{t('submit')}</Button>
      ) : (
        <Button
          className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm"
          onClick={() => goToPage(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          {t('nextPage')}
        </Button>
      )}
    </div>
  );
}