import Text from "./lib_components/text";

interface ErrorStateProps {
  message?: string;
  onRetry?: () => void;
}

export const ErrorState = ({ message, onRetry }: ErrorStateProps) => {
  return (
    <div className="col-span-full flex flex-col items-center justify-center py-20 px-4">
      <div className="w-24 h-24 mb-6 rounded-full bg-red-100 flex items-center justify-center">
        <svg
          className="w-12 h-12 text-red-500"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
          />
        </svg>
      </div>
      <h3 className="text-2xl font-bold text-[#0c1239] mb-2">
        <Text txt="errorTitle" />
      </h3>
      {message && (
        <p className="text-gray-500 text-center max-w-md mb-4">{message}</p>
      )}
      {onRetry && (
        <button
          onClick={onRetry}
          className="bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
            hover:cursor-pointer hover:bg-white hover:text-secondary transition-all"
        >
          <Text txt="retry" />
        </button>
      )}
    </div>
  );
};