// Import ========================================================================================================================
import App from '@/layouts/aia/app-layout';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import HeroContent from '@/components/aia/hero-content';
import Voice from '@/components/voice';
import Pagination from '@/components/pagination';
import type { Paginated, VoiceItem } from '@/types';

type VoiceOfImpactProps = {
  impactVoices: Paginated<VoiceItem>;
};

export default function VoiceOfImpact({ impactVoices }: VoiceOfImpactProps) {

  return (
    <App
      subNav={
        <SectionNavigation
          links={
            [{ name: 'AI in Taiwan', href: route('ai-in-taiwan') },
            { name: 'Voice of Impact', href: route('voice-of-impact') },
            { name: 'Certification', href: route('certification') },
            { name: 'Report', href: route('report') }
            ]
          }
        />
      }
      pageMeta={
        < PageMeta
          title="Voice of Impact"

        />
      }
      mainClass="pageContent"

    >

      <HeroContent
        heroContentHeading="Industry Leaders Speak"
        heroContentDescription="At Taiwan AI Academy, our partners and sponsors are at the forefront of AI transformation. Across industries, leading enterprises have joined us to advance AI education, develop top-tier talent, and drive innovation. Their experiences speak for themselves—hear how partnering with us has created lasting value, strengthened industry expertise, and shaped the future of AI in Taiwan."
      />

      <section className="pageSection">
        <div className="container pageIndent">
          <div className="voiceList">
            {impactVoices?.data && impactVoices.data.length > 0 ? (
              impactVoices.data.map((voice) => (
                <Voice
                  key={voice.id}
                  voiceImage={voice.image_url ?? undefined}
                  voiceContentHtml={voice.content_html}
                  voiceAuthorName={voice.author_name}
                  voiceAuthorTitle={voice.author_title ?? undefined}
                  voiceAuthorCompanyLogo={voice.company_logo_url ?? undefined}
                  quoteRight={voice.text_position === 'right'}
                />
              ))
            ) : (
              <p className="text-center text-gray-500">No voices available yet.</p>
            )}


          </div>
        </div>
        {impactVoices?.meta && (
          <Pagination
            currentPage={impactVoices.meta.current_page}
            lastPage={impactVoices.meta.last_page}
            perPage={impactVoices.meta.per_page}
            routeName="voice-of-impact"
          />
        )}
      </section>


    </App >
  );
}