"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { MenuItem } from "./types";

interface MenuGridProps {
  items: MenuItem[];
}

export function MenuGrid({ items }: MenuGridProps) {
  const router = useRouter();

  const handleClick = (item: MenuItem) => {
    if (item.href === "#") {
      alert(`${item.title} 화면은 준비 중입니다.`);
    } else {
      router.push(item.href);
    }
  };

  return (
    <div className="pop-dashboard-menu-grid">
      {items.map((item) => (
        <div
          key={item.id}
          className={`pop-dashboard-menu-card ${item.category}`}
          onClick={() => handleClick(item)}
        >
          <div className="pop-dashboard-menu-header">
            <div className="pop-dashboard-menu-title">{item.title}</div>
            <div className={`pop-dashboard-menu-count ${item.category}`}>
              {item.count}
            </div>
          </div>
          <div className="pop-dashboard-menu-desc">{item.description}</div>
          <div className="pop-dashboard-menu-status">{item.status}</div>
        </div>
      ))}
    </div>
  );
}