import React from "react";

import { ChevronDown } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Button } from "@/shared/common/ui/button";
import { getFormattedDashboardLabel } from "@/performance-management/utils/dashboardUtils";

interface DashboardDropdownProps {
  dashboards?: any[];
  selectedDashboard?: any;
  onSelect: (dashboard: any) => void;
  isLoading?: boolean;
}

export const DashboardDropdown: React.FC<DashboardDropdownProps> = ({
  dashboards = [],
  selectedDashboard,
  onSelect,
  isLoading = false,
}) => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          className="flex items-center justify-between w-60"
          disabled={isLoading}
        >
          {isLoading
            ? "Loading dashboards..."
            : getFormattedDashboardLabel(selectedDashboard?.name) ||
              "Select Dashboard"}
          <ChevronDown className="ml-2 h-4 w-4 opacity-70" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-60">
        <DropdownMenuLabel>Available Dashboards</DropdownMenuLabel>
        {dashboards?.length > 0 ? (
          dashboards.map((dashboard: any) => (
            <DropdownMenuItem
              key={dashboard.id}
              onClick={() => onSelect(dashboard)}>
              {getFormattedDashboardLabel(dashboard.name)}
            </DropdownMenuItem>
          ))
        ) : (
          <DropdownMenuItem disabled>No dashboards found</DropdownMenuItem>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};