import React from 'react';
import { FaExternalLinkAlt } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import PieChart, { type PieChartData } from './PieChart';

type AssetUpDownCardProps = {
  title: string;
  data: PieChartData | null;
  loading?: boolean;
  totalAssets: number;
  onOpenReport: () => void;
};

const AssetUpDownCard: React.FC<AssetUpDownCardProps> = ({
  title,
  data,
  loading = false,
  totalAssets,
  onOpenReport,
}) => {
  const { t } = useTranslation();

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all px-5 py-5 border border-gray-200 dark:border-gray-700">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-base font-semibold text-gray-900 dark:text-white">{title}</h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {totalAssets.toLocaleString()} {t('dashboard.totalAssetsLabel', { defaultValue: 'Total' })}
          </p>
        </div>
        <button
          type="button"
          onClick={onOpenReport}
          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-teal-600 dark:text-teal-300"
          title={t('dashboard.viewAssetStatusOverview', { defaultValue: 'View asset status overview' })}
        >
          <FaExternalLinkAlt className="w-4 h-4" />
        </button>
      </div>

      {loading ? (
        <div className="h-64 flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600" />
        </div>
      ) : !data?.labels?.length ? (
        <div className="h-64 flex items-center justify-center text-gray-400 text-sm">
          {t('dashboard.noAssetStatusData', { defaultValue: 'No asset status data' })}
        </div>
      ) : (
        <PieChart
          data={data}
          emptyMessage={t('dashboard.noAssetStatusData', { defaultValue: 'No asset status data' })}
        />
      )}
    </div>
  );
};

export default AssetUpDownCard;
