import type { ModuleId } from '@/shared/types/app';
import type { DirectorOverviewCard } from '@/business/director-dashboard/types';
import { Button } from '@/components/ui/button';
import {
  directorOverviewIcons,
  directorOverviewToneClasses,
  directorTrendClasses,
  directorTrendIcons,
} from '@/components/director-dashboard/directorDashboardViewConfig';

interface DirectorOverviewCardsProps {
  readonly cards: readonly DirectorOverviewCard[];
  readonly onOpenModule: (module: ModuleId) => void;
}

export function DirectorOverviewCards({
  cards,
  onOpenModule,
}: DirectorOverviewCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {cards.map((card) => {
        const OverviewIcon = directorOverviewIcons[card.iconId];
        const TrendIcon = directorTrendIcons[card.trend];

        return (
          <Button
            key={card.label}
            type="button"
            onClick={() => onOpenModule(card.module)}
            className="h-auto bg-white rounded-2xl border border-violet-100 shadow-sm p-5 text-left hover:shadow-md transition-all hover:-translate-y-0.5 group justify-start"
          >
            <div className="w-full">
              <div className="flex items-center justify-between mb-3">
                <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${directorOverviewToneClasses[card.tone]} flex items-center justify-center text-white`}>
                  <OverviewIcon size={20} />
                </div>
                <div className={`flex items-center gap-1 text-xs font-semibold ${directorTrendClasses[card.trend]}`}>
                  <TrendIcon size={12} />
                  {card.change}
                </div>
              </div>
              <p className="text-2xl font-bold text-gray-800">{card.value}</p>
              <p className="text-xs text-gray-500 mt-0.5">{card.label}</p>
            </div>
          </Button>
        );
      })}
    </div>
  );
}
