import React from "react";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { MetabaseDashboard } from "./MetabaseDashboard";

export const PerformanceDashboardPage = () => {
  const { yearId } = useParams<{ yearId: string }>();
  const { t } = useTranslation();
  return (
    <div className="p-4 md:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-800">
            <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
              {t(
                "performanceDashboard.title",
                "Performance Management Dashboard",
              )}
            </span>
          </h1>
          <p className="text-muted-foreground text-sm mt-1">
            {t(
              "performanceDashboard.description",
              "Comprehensive performance analytics and insights",
            )}
          </p>
        </div>
      </div>
      <MetabaseDashboard planYearId={yearId} />
    </div>
  );
};
