'use client';

import { useTranslation } from "@/lib/hooks/useTranslation";
import { useRouter } from "next/navigation";

export function BackButton() {
  const { t } = useTranslation();
  const router = useRouter();
  
  const handleGoBack = () => {
    // Check if we can go back in history
    if (window.history.length > 1) {
      // Go back to previous page
      router.back();
    } else {
      // Fallback to home page if there's no history
      router.push('/');
    }
  };

  return (
    <button 
      onClick={handleGoBack}
      className="flex items-center text-sm text-gray-600 hover:text-black"
      aria-label={t('product.back')}
    >
      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
      </svg>
      {t('product.back')}
    </button>
  );
}