"use client";
import { useCallback, type ReactNode } from "react";
import { useTranslations } from "next-intl";
import Tooltip from "@/shared/components/Tooltip";
interface FlowNodeProps {
icon: string;
color: "primary" | "orange" | "blue" | "emerald" | "amber" | "purple" | "cyan" | "pink";
title: string;
example: string;
tooltipContent?: string;
}
const COLOR_MAP: Record<
FlowNodeProps["color"],
{ border: string; bg: string; text: string }
> = {
primary: { border: "border-primary/30", bg: "bg-primary/5", text: "text-primary" },
orange: { border: "border-orange-500/30", bg: "bg-orange-500/5", text: "text-orange-500" },
blue: { border: "border-blue-500/30", bg: "bg-blue-500/5", text: "text-blue-500" },
emerald: {
border: "border-emerald-500/30",
bg: "bg-emerald-500/5",
text: "text-emerald-500",
},
amber: { border: "border-amber-500/30", bg: "bg-amber-500/5", text: "text-amber-500" },
purple: {
border: "border-purple-500/30",
bg: "bg-purple-500/5",
text: "text-purple-500",
},
cyan: { border: "border-cyan-500/30", bg: "bg-cyan-500/5", text: "text-cyan-500" },
pink: { border: "border-pink-500/30", bg: "bg-pink-500/5", text: "text-pink-500" },
};
function FlowNode({ icon, color, title, example, tooltipContent }: FlowNodeProps) {
const c = COLOR_MAP[color];
const node: ReactNode = (
);
return tooltipContent ? (
{node}
) : (
node
);
}
function FlowArrow({ label }: { label?: string }) {
return (
arrow_forward
{label && (
{label}
)}
);
}
export default function TranslateFlowDiagram() {
const t = useTranslations("translator");
const tr = useCallback(
(key: string, fallback: string) => {
try {
const translated = t(key);
return translated === key || translated === `translator.${key}` ? fallback : translated;
} catch {
return fallback;
}
},
[t],
);
return (
);
}