import type { ElementType } from "react";
import { useNavigate } from "react-router-dom";

interface ActionCardProps {
  title: string;
  icon: ElementType;
  to: string;
}

export default function DashboardActionCard({
  title,
  icon: Icon,
  to,
}: ActionCardProps) {
  const navigate = useNavigate();

  return (
    <div
      onClick={() => navigate(to)}
      style={{
        background: "var(--color-surface)",
        border: "1px solid var(--color-border)",
        borderRadius: "8px",
        padding: "24px 20px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "12px",
        cursor: "pointer",
        transition: "background 0.15s",
      }}
      onMouseEnter={(e) => {
        (e.currentTarget as HTMLDivElement).style.background =
          "var(--color-primary-active)";
      }}
      onMouseLeave={(e) => {
        (e.currentTarget as HTMLDivElement).style.background =
          "var(--color-surface)";
      }}
    >
      <Icon
        size={40}
        style={{ color: "var(--color-primary)" }}
      />
      <span
        style={{
          fontSize: "0.875rem",
          fontWeight: 600,
          color: "var(--color-text)",
        }}
      >
        {title}
      </span>
    </div>
  );
}