"use client";

import { useRouter } from "next/navigation";
import { Mountain, RotateCcw } from "lucide-react";
import styles from "./OpenTripEmptyState.module.css";

interface OpenTripEmptyStateProps {
  title?: string;
  description?: string;
  onReset?: () => void;
}

export default function OpenTripEmptyState({
  title = "Trip Tidak Ditemukan",
  description = "Belum ada jadwal open trip yang sesuai dengan filter pilihanmu.",
  onReset,
}: OpenTripEmptyStateProps) {
  const router = useRouter();

  const handleReset = () => {
    if (onReset) {
      onReset();
    } else {
      router.push("/open-trip");
    }
  };

  return (
    <div className={styles.emptyContainer} role="status">
      <div className={styles.iconCircle} aria-hidden="true">
        <Mountain size={36} className={styles.emptyIcon} />
      </div>

      <h3 className={styles.emptyTitle}>{title}</h3>
      <p className={styles.emptyDesc}>{description}</p>

      <button
        type="button"
        onClick={handleReset}
        className={styles.resetBtn}
        id="empty-state-reset-btn"
      >
        <RotateCcw size={15} className={styles.btnIcon} aria-hidden="true" />
        <span>Reset Filter</span>
      </button>
    </div>
  );
}