'use client';

import React, { useEffect } from 'react';
import { AlertTriangle, RefreshCw } from 'lucide-react';

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.error('Storefront error boundary caught:', error);
  }, [error]);

  return (
    <div className="w-full min-h-screen bg-[#F8F9FB] flex flex-col items-center justify-center p-6 font-sans">
      <div className="max-w-md w-full bg-white border border-gray-250 rounded-2xl p-8 text-center shadow-soft">
        <div className="w-12 h-12 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <AlertTriangle size={24} className="stroke-[2.5]" />
        </div>
        <h2 className="text-lg font-extrabold text-gray-900 mb-2 font-outfit">Something Went Wrong</h2>
        <p className="text-xs text-gray-500 font-medium mb-6">
          {error.message || 'We ran into an unexpected error loading this page. Please try refreshing.'}
        </p>
        <button
          onClick={() => reset()}
          className="inline-flex items-center justify-center gap-2 bg-[#0073EC] hover:bg-[#1565C0] text-white font-bold text-xs uppercase tracking-wider py-3.5 px-6 rounded-xl transition-all shadow-md active:scale-[0.99] cursor-pointer"
        >
          <RefreshCw size={14} className="animate-spin-slow" />
          <span>Try Again</span>
        </button>
      </div>
    </div>
  );
}