import { FolderPlus, MessageCircle, PlusCircle, UserPlus } from "lucide-react";
import { useTranslation } from "react-i18next";
import { ActionCard } from "./ActionCard";

export interface DashboardActionCardsProps {
  onCreateProject?: () => void;
  onCreateTask?: () => void;
  onInviteTeam?: () => void;
  onSendMessage?: () => void;
}

export function DashboardActionCards({
  onCreateProject,
  onCreateTask,
  onInviteTeam,
  onSendMessage,
}: DashboardActionCardsProps) {
  const { t } = useTranslation("pages");

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
      <ActionCard
        icon={<FolderPlus className="w-6 h-6" />}
        label={t("dashboard.actionCards.createProject.label")}
        description={t("dashboard.actionCards.createProject.description")}
        onClick={onCreateProject}
      />

      <ActionCard
        icon={<PlusCircle className="w-6 h-6" />}
        label={t("dashboard.actionCards.createTask.label")}
        description={t("dashboard.actionCards.createTask.description")}
        onClick={onCreateTask}
      />

      <ActionCard
        icon={<UserPlus className="w-6 h-6" />}
        label={t("dashboard.actionCards.inviteTeam.label")}
        description={t("dashboard.actionCards.inviteTeam.description")}
        onClick={onInviteTeam}
      />

      <ActionCard
        icon={<MessageCircle className="w-6 h-6" />}
        label={t("dashboard.actionCards.sendMessage.label")}
        description={t("dashboard.actionCards.sendMessage.description")}
        onClick={onSendMessage}
      />
    </div>
  );
}
