'use client';
import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { fixed } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ScatterResponse } from '@/lib/types-analytics';
import { BubbleChart } from '@/components/charts/bubble-chart';

/** Homepage teaser of the trajectories view: one static frame (latest year) of income vs life expectancy. */
export function TrajectoryTeaser({ data }: { data: ScatterResponse }) {
  const x = { format: data.x.format, unit: data.x.unit, unit_short: data.x.unit_short, precision: data.x.precision, name: data.x.short_name ?? data.x.name };
  const y = { format: data.y.format, unit: data.y.unit, unit_short: data.y.unit_short, precision: data.y.precision, name: data.y.short_name ?? data.y.name };
  const size = data.size ? { format: data.size.format, unit: data.size.unit, unit_short: data.size.unit_short, precision: data.size.precision, name: data.size.short_name ?? data.size.name } : null;
  const points = data.points.map((p) => ({ id: p.id, label: p.name ?? p.id, flag: p.flag, x: p.x, y: p.y, size: p.size, region: p.region, yearX: p.year_x, yearY: p.year_y }));
  return (
    <div className="min-w-0">
      <BubbleChart points={points} xSpec={x} ySpec={y} sizeSpec={size} logX={data.stats.log_x} logY={data.stats.log_y} height={340} labelCount={8} animate={false} yearLabel={data.year_used} highlight={['CAN']} />
      <div className="mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-ink-3">
        <span className="tnum">
          {t('home.trajectory.stats', { n: data.n, rho: data.stats.spearman != null ? fixed(data.stats.spearman, 2) : t('common.na'), year: data.year_used ?? '' })} · {data.note}
        </span>
        <Link href={routes.trajectories({ x: data.x.slug, y: data.y.slug })} className="inline-flex min-h-[36px] items-center gap-1 text-sm text-accent hover:underline">
          {t('home.trajectory.open')} <ArrowRight size={14} aria-hidden />
        </Link>
      </div>
    </div>
  );
}