'use client';

import Layout from '@/components/layout/Layout';
import { tamilculture } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

interface InnerDataItem {
  title: string;
  image: string;
  [key: string]: string | undefined;
}

interface EventData {
  image: string;
  title: string;
  desc?: string;
  date?: string;
  slug: string;
  link?: string;
  button?: string;
  InnerData?: InnerDataItem[];
}

export default function TamilLanguageData() {
  const searchParams = useSearchParams();
  const slug = searchParams.get('slug');

  const allEvents: EventData[] = Object.values(tamilculture).flat();

  const matchedEvent = allEvents.find((event) => event.slug === slug);

  return (
    <Layout headerStyle={1} footerStyle={1}>
      <div
        className="inner-page-header"
        style={{ backgroundImage: 'url(/assets/img/tamil-lang/big-img/tamil-inner-banner.webp)' }}
      >
        <div className="container">
          <div className="row">
            <div className="col-lg-12 m-auto">
              <div className="heading1">
                <h1>TAMIL LANGUAGE</h1>
                <div className="space20" />
                <Link href="/">
                  Home <i className="fa-solid fa-angle-right" /> <span>TAMIL LANGUAGE</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="about7-section-area sp1">
        <div className="container">
          {matchedEvent?.InnerData?.map((inner, index) => (
            <div key={index}>
              <div className="row justify-content-center mb-5">
                <div className="col-lg-10 text-center">
                  <h2 className="text-anime-style-3">{inner.title}</h2>
                </div>
              </div>

              {inner.image && (
                <div className="row justify-content-center mb-4">
                  <div className="col-lg-10">
                    <div className="image-anime reveal">
                      <img
                        src={inner.image}
                        alt={inner.title}
                        style={{ width: '100%', height: '500px', objectFit: 'cover' }}
                      />
                    </div>
                  </div>
                </div>
              )}

              <div className="row justify-content-center">
                <div className="col-lg-10">
                  {Object.entries(inner)
                    .filter(
                      ([key, value]) =>
                        key.startsWith('para') && typeof value === 'string' && value.trim() !== ''
                    )
                    .sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }))
                    .map(([_, value], i) => (
                      <p
                        key={i}
                        className="mb-4"
                        style={{ lineHeight: '1.8', fontSize: '1.1rem' }}
                      >
                        {value}
                      </p>
                    ))}
                </div>
              </div>
              <div className="team6-section-area mt-5">
                <div className="container">
                  <div className="row justify-content-end">
                    <div className="col-lg-5 col-md-6" data-aos="fade-up" data-aos-duration={1200}>
                      <div className="content-area">
                        <h4>HISTORY OF TAMIL LITERATURE</h4>
                        <div className="space12" />
                        <p>by Mu. Varadarajan, (Translated from Tamil by E.Sa. Viswanathan) Sahitya Akademi, New Delhi, 1988, p. 1- 17</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
          {!matchedEvent?.InnerData?.length && (
            <div className="row justify-content-center">
              <div className="col-lg-10 text-center">
                <p className="text-muted">No detailed content found for this event.</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
}