import React from 'react';
import { useTranslation } from '../../i18n/LanguageContext';

const scoreToPercent = (score) => Math.round(Math.max(0, Math.min(1.5, score)) * 100);

export default function StrengthList({ strengths = [] }) {
  const t = useTranslation();

  if (!strengths.length) {
    return (
      <div className="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-900/70 p-4 text-sm text-gray-600 dark:text-gray-300">
        {t('strength.no_data')}
      </div>
    );
  }

  return (
    <div className="rounded-2xl border border-emerald-200 dark:border-emerald-900 bg-white dark:bg-gray-900 p-5 shadow-sm">
      <h3 className="text-lg font-semibold text-emerald-700 dark:text-emerald-300 mb-4">{t('strength.title')}</h3>

      <div className="space-y-3">
        {strengths.map((item, index) => (
          <div
            key={item.name}
            className="rounded-xl border border-emerald-100 dark:border-emerald-900/60 bg-emerald-50/60 dark:bg-emerald-950/20 p-3"
          >
            <div className="flex items-center justify-between gap-3">
              <p className="font-semibold text-gray-900 dark:text-gray-100">
                {index + 1}. {item.name}
              </p>
              <span className="text-xs px-2 py-1 rounded-full bg-emerald-200/70 dark:bg-emerald-800/60 text-emerald-800 dark:text-emerald-200 font-semibold">
                {scoreToPercent(item.strengthScore)}
              </span>
            </div>
            <div className="mt-2 grid grid-cols-3 gap-2 text-xs text-gray-600 dark:text-gray-300">
              <p>{t('strength.actual', { score: item.actualMean.toFixed(2) })}</p>
              <p>{t('strength.target', { score: item.soll.toFixed(2) })}</p>
              <p>{t('strength.trend', { score: item.trendDelta.toFixed(2) })}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
