import React from 'react';
import { ArrowRight, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';

/**
 * Forge Insight — AI Career Insight Card
 */
interface ForgeInsightProps {
  headline?: any;
  detail?: any;
  highlight?: any;
  actionLabel?: any;
  onAction?: (...args: any[]) => void;
}

export function ForgeInsight({ headline, detail, highlight, actionLabel, onAction }: ForgeInsightProps) {
  const { t } = useTranslation();
  return (
    <aside className="relative overflow-hidden rounded-2xl border border-blue-500/30 bg-gradient-to-r from-blue-50/80 via-surface to-indigo-50/30 dark:from-blue-950/40 dark:via-surface dark:to-indigo-950/30 p-5 shadow-xs">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0 space-y-1">
          <div className="flex items-center gap-2">
            <Sparkles className="h-4 w-4 text-blue-600 dark:text-blue-400" />
            <span className="text-[11px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
              {t('forgeInsight.krowForgeInsight')}
            </span>
          </div>
          <p className="font-heading text-body-lg font-bold text-ink-1">{headline}</p>
          <p className="max-w-2xl text-body-sm leading-relaxed text-ink-3">
            {t('forgeInsight.nextBestSkill')} <span className="font-semibold text-blue-600 dark:text-blue-400">{highlight}</span>. {detail}
          </p>
        </div>

        <button
          type="button"
          onClick={onAction}
          className="group inline-flex shrink-0 items-center gap-2 self-start rounded-xl bg-blue-600 px-4 py-2 text-caption font-semibold text-white shadow-md shadow-blue-500/20 transition-all hover:bg-blue-700 active:scale-[0.98] sm:self-auto"
        >
          <span>{actionLabel}</span>
          <ArrowRight
            className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
            aria-hidden="true"
          />
        </button>
      </div>
    </aside>
  );
}