"use client";

import React, { useState } from "react";
import { AlertCircle, RefreshCw } from "lucide-react";
import styles from "./SectionError.module.css";

interface SectionErrorProps {
  title?: string;
  description?: string;
  onRetry?: () => Promise<void> | void;
  className?: string;
}

export default function SectionError({
  title = "Data perjalanan belum dapat dimuat",
  description = "Kami belum dapat mengambil informasi terbaru dari server. Silakan coba kembali beberapa saat lagi.",
  onRetry,
  className = "",
}: SectionErrorProps) {
  const [isRetrying, setIsRetrying] = useState(false);

  const handleRetry = async () => {
    if (!onRetry) return;
    setIsRetrying(true);
    try {
      await onRetry();
    } finally {
      setIsRetrying(false);
    }
  };

  return (
    <div className={`${styles.sectionErrorWrap} ${className}`} role="alert">
      <div className={styles.iconBox}>
        <AlertCircle size={24} aria-hidden />
      </div>
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.desc}>{description}</p>
      {onRetry && (
        <div className={styles.actions}>
          <button
            type="button"
            onClick={handleRetry}
            disabled={isRetrying}
            className={styles.retryBtn}
            id="section-error-retry-btn"
          >
            <RefreshCw
              size={15}
              className={isRetrying ? "animate-spin" : ""}
              aria-hidden
            />
            <span>{isRetrying ? "Memuat..." : "Coba Lagi"}</span>
          </button>
        </div>
      )}
    </div>
  );
}