// components/sections/RankedTopList.tsx
// Numbered ranking cards with expandable detail view, specs, pros/cons, CTAs
// Supports 3 design themes: default, warm, professional
'use client';

import { useState } from 'react';
import { Star, ChevronDown, ChevronUp, CheckCircle, XCircle, ExternalLink, Search } from 'lucide-react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { parseLines, parseKeyValueLines } from '@/lib/puck/parseHelpers';

// --- Types ---
interface DetailSpec {
  label: string;
  value: string;
  highlight?: boolean;
}

interface RankedItem {
  rank: number;
  name: string;
  logo: string;
  badge: string;
  rating: number;
  bonusLabel: string;
  bonusValue: string;
  specs?: {
    wageringLabel: string;
    wageringValue: string;
    maxWithdrawalLabel: string;
    maxWithdrawalValue: string;
    validityLabel: string;
    validityValue: string;
    licenseLabel: string;
    licenseValue: string;
  };
  wageringLabel?: string;
  wageringValue?: string;
  maxWithdrawalLabel?: string;
  maxWithdrawalValue?: string;
  validityLabel?: string;
  validityValue?: string;
  licenseLabel?: string;
  licenseValue?: string;
  ctaText: string;
  ctaUrl: string;
  ctaMicroCopy: string;
  reviewLinkText: string;
  detailSpecs: string | DetailSpec[];
  pros: string | string[];
  cons: string | string[];
  editorialReview: string;
  reviewerName: string;
  reviewerAvatar: string;
  recommendPoints: string | string[];
}

// --- Theme System ---
type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeColors {
  // Card
  card: string;
  cardHover: string;
  // Rank badge
  rankBadge: (rank: number) => string;
  // Star rating
  starFill: string;
  starEmpty: string;
  // Badge label
  badgeBg: string;
  badgeText: string;
  // Bonus banner
  bonusBanner: string;
  bonusText: string;
  // Spec cards
  specCard: string;
  specLabel: string;
  specValue: string;
  // CTA button
  ctaBtn: string;
  ctaBtnHover: string;
  // Review/expand link
  expandLink: string;
  expandLinkHover: string;
  // Detail view
  detailBg: string;
  detailBorder: string;
  // Tabs
  tabActive: string;
  tabInactive: string;
  // Pros/Cons
  proDot: string;
  proIcon: string;
  conDot: string;
  // Logo fallback
  logoFallbackBg: string;
  logoFallbackText: string;
}

const THEMES: Record<ThemeKey, ThemeColors> = {
  default: {
    card: 'bg-white rounded-2xl border border-soft-gray-border/40 shadow-sm',
    cardHover: 'hover:shadow-md',
    rankBadge: (rank) =>
      rank === 1 ? 'bg-crimson-red text-white shadow-brand-primary/30'
      : rank === 2 ? 'bg-hover-red text-white shadow-brand-action/30'
      : rank === 3 ? 'bg-soft-dark text-white shadow-brand-accent/30'
      : 'bg-deep-black text-text-light-gray shadow-brand-accent/20',
    starFill: 'fill-crimson-red text-crimson-red',
    starEmpty: 'text-text-light-gray',
    badgeBg: 'bg-crimson-red/10',
    badgeText: 'text-crimson-red',
    bonusBanner: 'bg-gradient-to-r from-brand-primary to-brand-action',
    bonusText: 'text-white',
    specCard: 'bg-deep-black rounded-lg',
    specLabel: 'text-text-light-gray',
    specValue: 'text-white',
    ctaBtn: 'bg-crimson-red text-white shadow-md hover:bg-hover-red hover:shadow-lg',
    ctaBtnHover: '',
    expandLink: 'text-crimson-red hover:text-hover-red',
    expandLinkHover: '',
    detailBg: 'border-t border-soft-gray-border/30 bg-deep-black/50',
    detailBorder: 'border-soft-gray-border/30',
    tabActive: 'bg-crimson-red text-white shadow-md',
    tabInactive: 'text-text-light-gray hover:text-white hover:bg-white',
    proDot: 'bg-crimson-red',
    proIcon: 'text-crimson-red',
    conDot: 'bg-text-secondary',
    logoFallbackBg: 'bg-crimson-red/10',
    logoFallbackText: 'text-crimson-red',
  },

  warm: {
    card: 'bg-white rounded-2xl border border-orange-200 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-orange-300',
    rankBadge: (rank) =>
      rank === 1 ? 'bg-gradient-to-br from-orange-500 to-red-500 text-white shadow-orange-500/30'
      : rank === 2 ? 'bg-gradient-to-br from-amber-400 to-orange-400 text-white shadow-amber-400/30'
      : rank === 3 ? 'bg-gradient-to-br from-yellow-300 to-amber-300 text-amber-900 shadow-yellow-300/30'
      : 'bg-orange-50 text-orange-600 shadow-orange-200/30',
    starFill: 'fill-orange-400 text-orange-400',
    starEmpty: 'text-orange-200',
    badgeBg: 'bg-orange-50 border border-orange-200',
    badgeText: 'text-orange-700',
    bonusBanner: 'bg-gradient-to-r from-orange-500 via-red-500 to-pink-500',
    bonusText: 'text-white',
    specCard: 'bg-orange-50/80 rounded-lg border border-orange-100',
    specLabel: 'text-orange-600/80',
    specValue: 'text-slate-800',
    ctaBtn: 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/25 hover:shadow-xl hover:shadow-orange-500/30 hover:from-orange-600 hover:to-red-600',
    ctaBtnHover: '',
    expandLink: 'text-orange-600 hover:text-red-500',
    expandLinkHover: '',
    detailBg: 'border-t-2 border-orange-200 bg-gradient-to-b from-orange-50/60 to-white',
    detailBorder: 'border-orange-200',
    tabActive: 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/20',
    tabInactive: 'text-slate-500 hover:text-orange-600 hover:bg-orange-50',
    proDot: 'bg-emerald-500',
    proIcon: 'text-emerald-500',
    conDot: 'bg-red-400',
    logoFallbackBg: 'bg-gradient-to-br from-orange-100 to-red-50',
    logoFallbackText: 'text-orange-600',
  },

  professional: {
    card: 'bg-white rounded-2xl border border-slate-200 shadow-sm ring-1 ring-slate-100',
    cardHover: 'hover:shadow-lg hover:ring-slate-200',
    rankBadge: (rank) =>
      rank === 1 ? 'bg-gradient-to-br from-slate-800 to-slate-900 text-amber-300 shadow-slate-800/40 ring-2 ring-amber-400/30'
      : rank === 2 ? 'bg-gradient-to-br from-slate-600 to-slate-700 text-slate-100 shadow-slate-600/30'
      : rank === 3 ? 'bg-gradient-to-br from-slate-400 to-slate-500 text-white shadow-slate-400/30'
      : 'bg-slate-100 text-slate-500 shadow-slate-200/30',
    starFill: 'fill-amber-400 text-amber-400',
    starEmpty: 'text-slate-200',
    badgeBg: 'bg-slate-100 border border-slate-200',
    badgeText: 'text-slate-700',
    bonusBanner: 'bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800',
    bonusText: 'text-white',
    specCard: 'bg-slate-50 rounded-lg border border-slate-150',
    specLabel: 'text-slate-500',
    specValue: 'text-slate-900',
    ctaBtn: 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-600/20 hover:shadow-xl hover:from-emerald-700 hover:to-teal-700',
    ctaBtnHover: '',
    expandLink: 'text-slate-600 hover:text-emerald-600',
    expandLinkHover: '',
    detailBg: 'border-t border-slate-200 bg-gradient-to-b from-slate-50 to-white',
    detailBorder: 'border-slate-200',
    tabActive: 'bg-slate-800 text-white shadow-lg shadow-slate-800/20',
    tabInactive: 'text-slate-500 hover:text-slate-800 hover:bg-slate-50',
    proDot: 'bg-emerald-500',
    proIcon: 'text-emerald-500',
    conDot: 'bg-red-400',
    logoFallbackBg: 'bg-slate-100',
    logoFallbackText: 'text-slate-600',
  },

  ocean: {
    card: 'bg-white rounded-2xl border border-blue-200 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-blue-300',
    rankBadge: (rank) =>
      rank === 1 ? 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-blue-600/30'
      : rank === 2 ? 'bg-gradient-to-br from-cyan-500 to-blue-500 text-white shadow-cyan-500/30'
      : rank === 3 ? 'bg-gradient-to-br from-sky-400 to-cyan-400 text-white shadow-sky-400/30'
      : 'bg-blue-50 text-blue-600 shadow-blue-200/30',
    starFill: 'fill-blue-500 text-blue-500',
    starEmpty: 'text-blue-200',
    badgeBg: 'bg-blue-50 border border-blue-200',
    badgeText: 'text-blue-700',
    bonusBanner: 'bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600',
    bonusText: 'text-white',
    specCard: 'bg-blue-50/60 rounded-lg border border-blue-100',
    specLabel: 'text-blue-600/80',
    specValue: 'text-slate-800',
    ctaBtn: 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/25 hover:shadow-xl hover:from-blue-700 hover:to-indigo-700',
    ctaBtnHover: '',
    expandLink: 'text-blue-600 hover:text-indigo-600',
    expandLinkHover: '',
    detailBg: 'border-t-2 border-blue-200 bg-gradient-to-b from-blue-50/60 to-white',
    detailBorder: 'border-blue-200',
    tabActive: 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20',
    tabInactive: 'text-slate-500 hover:text-blue-600 hover:bg-blue-50',
    proDot: 'bg-blue-500',
    proIcon: 'text-blue-500',
    conDot: 'bg-red-400',
    logoFallbackBg: 'bg-gradient-to-br from-blue-100 to-indigo-50',
    logoFallbackText: 'text-blue-600',
  },

  forest: {
    card: 'bg-white rounded-2xl border border-emerald-200 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-emerald-300',
    rankBadge: (rank) => rank <= 3 ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white' : 'bg-emerald-100 text-emerald-700',
    starFill: 'fill-emerald-400 text-emerald-400',
    starEmpty: 'fill-slate-200 text-slate-200',
    badgeBg: 'bg-emerald-50',
    badgeText: 'text-emerald-600',
    bonusBanner: 'bg-gradient-to-r from-emerald-500 to-teal-600',
    bonusText: 'text-white',
    specCard: 'bg-emerald-50/80 rounded-lg border border-emerald-100',
    specLabel: 'text-emerald-600/80',
    specValue: 'text-slate-800',
    ctaBtn: 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-600/25 hover:shadow-xl hover:from-emerald-700 hover:to-teal-700',
    ctaBtnHover: '',
    expandLink: 'text-emerald-600 hover:text-teal-600',
    expandLinkHover: '',
    detailBg: 'border-t-2 border-emerald-200 bg-gradient-to-b from-emerald-50/60 to-white',
    detailBorder: 'border-emerald-200',
    tabActive: 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-600/20',
    tabInactive: 'text-slate-500 hover:text-emerald-600 hover:bg-emerald-50',
    proDot: 'bg-emerald-500',
    proIcon: 'text-emerald-500',
    conDot: 'bg-red-400',
    logoFallbackBg: 'bg-gradient-to-br from-emerald-100 to-teal-50',
    logoFallbackText: 'text-emerald-600',
  },
};

// --- Rating Stars ---
function RatingStars({ rating, t }: { rating: number; t: ThemeColors }) {
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`w-4 h-4 ${star <= Math.round(rating) ? t.starFill : t.starEmpty}`}
        />
      ))}
      <span className="ml-1.5 text-sm font-bold text-white">{rating}</span>
    </div>
  );
}

function RankBadge({ rank, t }: { rank: number; t: ThemeColors }) {
  return (
    <div className={`absolute -top-3 -left-3 z-20 w-10 h-10 rounded-xl ${t.rankBadge(rank)} shadow-lg flex items-center justify-center font-bold text-lg`}>
      {rank}
    </div>
  );
}

// --- Expanded Details ---
function ExpandedDetails({ item, t, linkAttrs }: { item: any; t: ThemeColors; linkAttrs: any }) {
  return (
    <div className={`${t.detailBg} p-6 space-y-6 animate-in slide-in-from-top-2 duration-300`}>
      {/* Spec table */}
      {item._detailSpecs.length > 0 && (
        <div className={`overflow-hidden rounded-lg border ${t.detailBorder}`}>
          <table className="w-full text-sm">
            <tbody>
              {item._detailSpecs.map((spec, i) => (
                <tr key={i} className={`${i % 2 === 0 ? 'bg-white' : 'bg-slate-50/60'} border-b ${t.detailBorder} last:border-0`}>
                  <td className="px-4 py-2.5 font-medium text-text-light-gray w-1/3">{spec.label}</td>
                  <td className={`px-4 py-2.5 ${spec.highlight ? `font-bold ${t.badgeText}` : 'text-white'}`}>
                    {spec.value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Pros & Cons */}
      <div className="grid md:grid-cols-2 gap-6">
        {item._pros.length > 0 && (
          <div>
            <h4 className="font-bold text-white mb-3 flex items-center gap-2">
              <CheckCircle className={`w-5 h-5 ${t.proIcon}`} /></h4>
            <ul className="space-y-2">
              {item._pros.map((pro, i) => (
                <li key={i} className="flex items-start gap-2 text-sm text-text-light-gray">
                  <span className={`mt-1 w-1.5 h-1.5 rounded-full ${t.proDot} flex-shrink-0`} />
                  {pro}
                </li>
              ))}
            </ul>
          </div>
        )}

        {item._cons.length > 0 && (
          <div>
            <h4 className="font-bold text-white mb-3 flex items-center gap-2">
              <XCircle className="w-5 h-5 text-red-400" /></h4>
            <ul className="space-y-2">
              {item._cons.map((con, i) => (
                <li key={i} className="flex items-start gap-2 text-sm text-text-light-gray">
                  <span className={`mt-1 w-1.5 h-1.5 rounded-full ${t.conDot} flex-shrink-0`} />
                  {con}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {/* Editorial review */}
      {item.editorialReview && (
        <div className={`bg-white rounded-lg border ${t.detailBorder} p-5`}>
          <h4 className="font-bold text-white mb-2"></h4>
          <p className="text-sm text-text-light-gray leading-relaxed">{item.editorialReview}</p>
          {item.reviewerName && (
            <div className={`flex items-center gap-3 mt-4 pt-3 border-t ${t.detailBorder}`}>
              {item.reviewerAvatar ? (
                <img src={item.reviewerAvatar} alt={item.reviewerName} className="w-8 h-8 rounded-full object-cover" />
              ) : (
                <div className={`w-8 h-8 rounded-full ${t.logoFallbackBg} flex items-center justify-center`}>
                  <span className={`text-xs font-bold ${t.logoFallbackText}`}>{(item.reviewerName || '?').charAt(0)}</span>
                </div>
              )}
              <span className="text-xs text-text-light-gray"><strong className="text-white">{item.reviewerName}</strong></span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// --- Normalize Items ---
function normalizeItem(item: RankedItem) {
  const _detailSpecs: DetailSpec[] = typeof item.detailSpecs === 'string'
    ? parseKeyValueLines(item.detailSpecs).map(({ label, value }) => ({ label, value }))
    : (item.detailSpecs || []);
  const _pros = typeof item.pros === 'string' ? parseLines(item.pros) : (item.pros || []);
  const _cons = typeof item.cons === 'string' ? parseLines(item.cons) : (item.cons || []);
  const _recommendPoints = typeof item.recommendPoints === 'string' ? parseLines(item.recommendPoints) : (item.recommendPoints || []);
  const _specs = item.specs || {
    wageringLabel: item.wageringLabel || '賭け条件',
    wageringValue: item.wageringValue || '-',
    maxWithdrawalLabel: item.maxWithdrawalLabel || '最大出金額',
    maxWithdrawalValue: item.maxWithdrawalValue || '-',
    validityLabel: item.validityLabel || '有効期限',
    validityValue: item.validityValue || '-',
    licenseLabel: item.licenseLabel || 'ライセンス',
    licenseValue: item.licenseValue || '-',
  };
  return { ...item, _detailSpecs, _pros, _cons, _recommendPoints, _specs };
}

// --- Tab Type ---
interface RankedTopListTab {
  label: string;
  items: RankedItem[];
}

// --- Main Component Props ---
interface RankedTopListProps {
  sectionTitle: string;
  sectionSubtitle?: string;
  items?: RankedItem[];
  tabs?: RankedTopListTab[];
  theme?: ThemeKey;
  forceExpanded?: boolean;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
  anchorId?: string;
}

export function RankedTopList({ sectionTitle, sectionSubtitle, items, tabs, theme = 'default', forceExpanded = false, openInNewTab = 'new', relAttribute = 'sponsored', anchorId }: RankedTopListProps) {
  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [collapsedIds, setCollapsedIds] = useState<Set<number>>(new Set());
  const [activeTab, setActiveTab] = useState(0);

  const t = THEMES[theme] || THEMES.default;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });
  const hasTabs = tabs && tabs.length > 1;
  const displayItems = hasTabs ? (tabs[activeTab]?.items || []) : (items || []);

  return (
    <section id={anchorId || undefined} className="w-full py-12 md:py-16">
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      {sectionTitle && (
        <div className="mb-6">
          <h2 className="text-2xl md:text-3xl font-bold text-white">{sectionTitle}</h2>
          {sectionSubtitle && (
            <p className="mt-2 text-text-light-gray">{sectionSubtitle}</p>
          )}
        </div>
      )}

      {hasTabs && (
        <div className="flex gap-1 mb-8 bg-white/80 backdrop-blur-sm rounded-xl p-1.5 max-w-fit border border-slate-200/60 shadow-sm">
          {tabs.map((tab, idx) => (
            <button
              key={idx}
              onClick={() => { setActiveTab(idx); setExpandedId(null); }}
              className={`px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 ${
                activeTab === idx ? t.tabActive : t.tabInactive
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      )}

      {displayItems.length === 0 ? (
        <div className="text-center py-8 text-text-light-gray italic"></div>
      ) : (
      <div className="space-y-6 pl-3 pt-3 pr-2">
        {displayItems.map((item, idx) => {
          const isExpanded = forceExpanded
            ? !collapsedIds.has(idx) // forceExpanded: all open unless manually collapsed
            : expandedId === idx;    // normal: only one open at a time
          const nItem = normalizeItem(item);
          return (
            <div key={`${activeTab}-${idx}`} className="relative">
              <RankBadge rank={item.rank} t={t} />
              <div
                className={`${t.card} ${t.cardHover} transition-all duration-300 overflow-hidden`}
              >
                <div className="p-6 pl-10">
                <div className="flex flex-col lg:flex-row gap-6">
                  {/* Left: Logo + name + rating */}
                  <div className="flex flex-col items-center lg:items-start gap-2 min-w-[140px]">
                    {item.logo ? (
                      <Link href={item.ctaUrl || '#'} {...linkAttrs} className="w-24 h-24 rounded-xl border border-slate-200 flex items-center justify-center bg-white overflow-hidden transition-transform hover:scale-105 hover:shadow-md">
                        <img src={item.logo} alt={item.name || ''} className="w-20 h-20 object-contain" />
                      </Link>
                    ) : (
                      <Link href={item.ctaUrl || '#'} {...linkAttrs} className={`w-24 h-24 rounded-xl ${t.logoFallbackBg} flex items-center justify-center transition-transform hover:scale-105 hover:shadow-md`}>
                        <span className={`text-2xl font-bold ${t.logoFallbackText}`}>{(item.name || '?').charAt(0)}</span>
                      </Link>
                    )}
                    <h3 className="font-bold text-white text-center lg:text-left"><Link href={item.ctaUrl || '#'} {...linkAttrs} className="hover:underline">{item.name || ''}</Link></h3>
                    {item.badge && (
                      <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${t.badgeBg} ${t.badgeText}`}>
                        {item.badge}
                      </span>
                    )}
                    <RatingStars rating={item.rating} t={t} />
                  </div>

                  {/* Center: Bonus banner + specs */}
                  <div className="flex-1 space-y-4">
                    <div className={`${t.bonusBanner} rounded-xl px-5 py-3 flex items-center justify-between`}>
                      <span className={`${t.bonusText} text-sm font-medium`}>{item.bonusLabel}</span>
                      <span className={`${t.bonusText} text-2xl font-extrabold`}>{item.bonusValue}</span>
                    </div>
                    {nItem._recommendPoints && nItem._recommendPoints.length > 0 && (
                      <ul className="space-y-1.5 mt-2">
                        {nItem._recommendPoints.map((point, idx) => (
                          <li key={idx} className="flex items-start gap-2 text-sm text-text-light-gray font-medium">
                            <span className="text-emerald-500 font-bold mt-0.5">✓</span>
                            <span>{point}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                    <div className="grid grid-cols-2 gap-3">
                      {[
                        { label: nItem._specs.wageringLabel, value: nItem._specs.wageringValue },
                        { label: nItem._specs.maxWithdrawalLabel, value: nItem._specs.maxWithdrawalValue },
                        { label: nItem._specs.validityLabel, value: nItem._specs.validityValue },
                        { label: nItem._specs.licenseLabel, value: nItem._specs.licenseValue },
                      ].map((spec, i) => (
                        <div key={i} className={`${t.specCard} p-3 text-center`}>
                          <p className={`text-xs ${t.specLabel}`}>{spec.label}</p>
                          <p className={`text-sm font-bold ${t.specValue} mt-0.5`}>{spec.value}</p>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Right: CTAs */}
                  <div className="flex flex-col items-center gap-3 min-w-[180px]">
                    {item.ctaMicroCopy && (
                      <p className="text-xs text-text-light-gray">{item.ctaMicroCopy}</p>
                    )}
                    <Link
                      href={item.ctaUrl || '#'}
          {...linkAttrs}
                      className={`w-full flex items-center justify-center gap-2 px-6 py-3.5 font-bold rounded-xl transition-all duration-200 text-sm ${t.ctaBtn}`}
                    >
                      {item.ctaText}
                      <ExternalLink className="w-4 h-4" />
                    </Link>
                    <button
                      onClick={() => {
                        if (forceExpanded) {
                          setCollapsedIds(prev => {
                            const next = new Set(prev);
                            if (next.has(idx)) next.delete(idx); else next.add(idx);
                            return next;
                          });
                        } else {
                          setExpandedId(isExpanded ? null : idx);
                        }
                      }}
                      className={`flex items-center gap-1.5 text-sm transition-colors ${t.expandLink}`}
                    >
                      <Search className="w-3.5 h-3.5" />
                      {item.reviewLinkText}
                      {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
                    </button>
                  </div>
                </div>
              </div>
              {isExpanded && <ExpandedDetails item={nItem} t={t} linkAttrs={linkAttrs} />}
              </div>
            </div>
          );
        })}
      </div>
      )}
    </div>
    </section>
  );
}
