"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import AppImage from "@/components/ui/AppImage";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import { ADS_728X90, shuffle } from "@/lib/ads";

interface AuthorProfile {
  slug: string;
  name: string;
  title: string;
  avatar: string;
  coverImage: string;
  bio: string;
  location: string;
  joinedDate: string;
  articleCount: number;
  specialties: string[];
  social: {
    twitter?: string;
    linkedin?: string;
    email?: string;
  };
}

interface AuthorArticle {
  slug: string;
  title: string;
  excerpt: string;
  category: string;
  date: string;
  image: string;
  alt: string;
  readTime: string;
}

const authors: Record<string, AuthorProfile> = {
  "ryan-salazar": {
    slug: "ryan-salazar",
    name: "Ryan Salazar",
    title: "Founder of Broadcast Beat",
    avatar: "/assets/images/logo.png",
    coverImage: "/assets/images/og-image.png",
    bio: "Ryan Salazar is the founder of Broadcast Beat Magazine and the Executive Producer of NAB Show LIVE for the National Association of Broadcasters. With more than 20 years in audio, visual, and broadcast technology, Ryan began his career in 1997 as an audio engineer and producer/director at ProComm Studios, then spent seven years as Chief Technology Officer at SunSpots Productions running all AV and IT operations. In 2005 he launched AV Beat to cover the audio-visual industry, and in 2014 transitioned to SMPTE LIVE as Executive Producer and on-camera talent, interviewing industry luminaries including James Cameron, Douglas Trumbull, Billy Zane, and Richard Edlund. Ryan founded Broadcast Beat in December 2013 to give broadcast and production engineers a dedicated trade publication focused on the engineering side of the industry — live production, IP workflows, streaming, cloud, audio, and post. In 2020 he also became President and CTO of Broadcast Beat Studios, a production company based in South Florida. Today he continues to lead Broadcast Beat alongside Relevant Media Properties' growing portfolio of trade publications.",
    location: "United States",
    joinedDate: "December 2013",
    articleCount: 1200,
    specialties: ["Broadcast Engineering", "Live Production", "Industry Strategy", "Editorial Direction"],
    social: {
      twitter: "https://twitter.com/broadcastbeat",
      linkedin: "https://linkedin.com/company/broadcastbeat",
      email: "ryan.salazar@relevantmediaproperties.com"
    }
  },
  "staff-reporter": {
    slug: "staff-reporter",
    name: "Broadcast Beat",
    title: "Broadcast Beat Editorial Team",
    avatar: "/assets/images/article-placeholder.svg",
    coverImage: "/assets/images/article-placeholder.svg",
    bio: "The Broadcast Beat editorial team covers breaking news and product announcements from across the broadcast technology industry. Our team of experienced journalists and industry insiders brings you the latest developments from NAB, IBC, and beyond.",
    location: "Global",
    joinedDate: "December 2013",
    articleCount: 847,
    specialties: ["Breaking News", "Product Launches", "Industry Events", "Press Releases"],
    social: {
      twitter: "https://twitter.com/broadcastbeat",
      linkedin: "https://linkedin.com/company/broadcastbeat",
      email: "editorial@broadcastbeat.com"
    }
  },
  "james-whitfield": {
    slug: "james-whitfield",
    name: "James Whitfield",
    title: "Senior Technology Correspondent",
    avatar: "/assets/images/article-placeholder.svg",
    coverImage: "/assets/images/article-placeholder.svg",
    bio: "James Whitfield is a senior technology correspondent with over 15 years of experience covering the broadcast and media technology industry. He specializes in ad tech, monetization strategies, and the business of broadcasting. James has interviewed hundreds of industry leaders and covered every major broadcast technology event since 2010.",
    location: "New York, NY",
    joinedDate: "March 2018",
    articleCount: 312,
    specialties: ["Ad Technology", "Monetization", "Streaming", "Business Strategy"],
    social: {
      twitter: "https://twitter.com/jwhitfield",
      linkedin: "https://linkedin.com/in/jameswhitfield",
      email: "james@broadcastbeat.com"
    }
  },
  "sarah-chen": {
    slug: "sarah-chen",
    name: "Sarah Chen",
    title: "Audio Technology Editor",
    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
    coverImage: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=1200&h=400&fit=crop",
    bio: "Sarah Chen is Broadcast Beat's audio technology editor, bringing deep expertise in professional audio systems, live sound, and broadcast audio workflows. With a background in audio engineering and a decade of industry journalism, Sarah provides authoritative coverage of the audio technology landscape.",
    location: "Los Angeles, CA",
    joinedDate: "June 2019",
    articleCount: 198,
    specialties: ["Audio Technology", "Live Production", "Mixing Consoles", "IP Audio"],
    social: {
      twitter: "https://twitter.com/sarahchentech",
      linkedin: "https://linkedin.com/in/sarahchen",
      email: "sarah@broadcastbeat.com"
    }
  },
  "elena-vasquez": {
    slug: "elena-vasquez",
    name: "Elena Vasquez",
    title: "Features Editor",
    avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face",
    coverImage: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=400&fit=crop",
    bio: "Elena Vasquez is Broadcast Beat's features editor, specializing in long-form analysis of industry trends, emerging technologies, and the strategic challenges facing media organizations. Her work explores the intersection of technology, business, and creativity in the broadcast industry.",
    location: "London, UK",
    joinedDate: "September 2017",
    articleCount: 156,
    specialties: ["Industry Analysis", "AI & Automation", "Content Strategy", "Media Intelligence"],
    social: {
      twitter: "https://twitter.com/elenavasquez",
      linkedin: "https://linkedin.com/in/elenavasquez",
      email: "elena@broadcastbeat.com"
    }
  },
  "rachel-kim": {
    slug: "rachel-kim",
    name: "Rachel Kim",
    title: "Technology Analyst",
    avatar: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=200&h=200&fit=crop&crop=face",
    coverImage: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=400&fit=crop",
    bio: "Rachel Kim is a technology analyst at Broadcast Beat, focusing on data-driven coverage of storage technologies, media asset management, and cloud infrastructure. Her analytical approach brings quantitative rigor to technology coverage, helping readers understand the business implications of technical decisions.",
    location: "San Francisco, CA",
    joinedDate: "February 2021",
    articleCount: 89,
    specialties: ["Storage Technology", "Cloud Infrastructure", "MAM Systems", "Industry Data"],
    social: {
      twitter: "https://twitter.com/rachelkimtech",
      linkedin: "https://linkedin.com/in/rachelkim",
      email: "rachel@broadcastbeat.com"
    }
  },
  "marcus-rivera": {
    slug: "marcus-rivera",
    name: "Marcus Rivera",
    title: "Sports Broadcasting Correspondent",
    avatar: "/assets/images/article-placeholder.svg",
    coverImage: "/assets/images/article-placeholder.svg",
    bio: "Marcus Rivera covers sports broadcasting technology for Broadcast Beat, with a particular focus on live production, fan engagement, and the evolving landscape of sports media rights. He brings a unique perspective that combines technical knowledge with an understanding of the sports media business.",
    location: "Miami, FL",
    joinedDate: "April 2020",
    articleCount: 134,
    specialties: ["Sports Broadcasting", "Live Production", "Fan Engagement", "Streaming"],
    social: {
      twitter: "https://twitter.com/marcusrivera",
      linkedin: "https://linkedin.com/in/marcusrivera",
      email: "marcus@broadcastbeat.com"
    }
  }
};

const authorArticles: Record<string, AuthorArticle[]> = {
  "staff-reporter": [
  {
    slug: "telestream-expands-cloud-services-up",
    title: "Telestream Expands Its Cloud Services with the Introduction of UP",
    excerpt: "New cloud-native platform extends Telestream Cloud Services to support Global Ingest, automation, review, and real-time monitoring.",
    category: "BROADCAST",
    date: "March 11, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Cloud services infrastructure for broadcast production environments",
    readTime: "4 min read"
  },
  {
    slug: "emergent-launches-fusion-platform",
    title: "Emergent Launches Fusion: The 'Interactive Anything' Platform Transforming Data-Driven Storytelling",
    excerpt: "No-code application builder designed to transform complex live data into immersive interactive storytelling experiences.",
    category: "BROADCAST",
    date: "March 8, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Interactive data storytelling platform for broadcast and enterprise use",
    readTime: "3 min read"
  },
  {
    slug: "globalm-distributed-video-gateway",
    title: "GlobalM Introduces Distributed Video Gateway Architecture",
    excerpt: "New distributed architecture addresses the growing demand for scalable, resilient live IP transport solutions.",
    category: "BROADCAST",
    date: "March 7, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Network infrastructure for distributed video gateway IP transport system",
    readTime: "3 min read"
  }],

  "james-whitfield": [
  {
    slug: "operative-launches-aos-configuration",
    title: "Operative Launches AOS Configuration for Digital-First Monetization",
    excerpt: "Enterprise-grade intelligent ad management built to scale digital-first revenue across every channel.",
    category: "BROADCAST",
    date: "March 11, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Digital monetization analytics dashboard for broadcast advertising",
    readTime: "5 min read"
  },
  {
    slug: "viaccess-orca-nab-2026",
    title: "Cost Savings, Scalability, and Smarter Monetization: Viaccess-Orca Brings Efficiency to NAB 2026",
    excerpt: "Purpose-driven solutions designed to help broadcasters reduce operational costs while improving content monetization.",
    category: "BROADCAST",
    date: "March 5, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Broadcast technology monetization solutions at NAB Show 2026",
    readTime: "4 min read"
  }],

  "sarah-chen": [
  {
    slug: "calrec-redefines-broadcast-workflows-nab-2026",
    title: "Calrec Redefines Broadcast Workflows at NAB 2026 with its Most Powerful Audio Lineup Yet",
    excerpt: "The broadcast industry is going through a rapid evolution that's signalling a more collaborative and location-independent future.",
    category: "BROADCAST",
    date: "March 10, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Calrec audio mixing console for broadcast production at NAB 2026",
    readTime: "6 min read"
  }],

  "elena-vasquez": [
  {
    slug: "from-metadata-to-meaning-semantic-intelligence",
    title: "From Metadata to Meaning: Why Semantic Intelligence Is Media's Next Competitive Advantage",
    excerpt: "Strategic conversations about content performance and audience intelligence are shifting the way media organizations approach their metadata strategies.",
    category: "FEATURED",
    date: "March 9, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Media metadata intelligence and content analytics visualization",
    readTime: "8 min read"
  },
  {
    slug: "mediagenix-title-management",
    title: "Mediagenix Title Management Accelerates Content Monetization Through Advanced Semantic Intelligence",
    excerpt: "Advancing Semantic Intelligence capabilities to help studios and networks unlock greater value from their content libraries.",
    category: "POST PRODUCTION",
    date: "March 9, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Content management system for media title management and monetization",
    readTime: "5 min read"
  }],

  "rachel-kim": [
  {
    slug: "video-is-king-2026-iconik-media-stats",
    title: "Video is King: 2026 Iconik Media Stats Report Finds Video Consumes 64% of Storage Needs",
    excerpt: "Annual media statistics report reveals video's growing dominance in enterprise storage requirements.",
    category: "FEATURED",
    date: "March 6, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Video storage statistics and media asset management data visualization",
    readTime: "5 min read"
  }],

  "marcus-rivera": [
  {
    slug: "ease-live-premier-padel-red-bull-tv",
    title: "Ease Live Powers Interactive Premier Padel Experiences on Red Bull TV as Viewership Surges 30%",
    excerpt: "Real-time fan engagement enhances viewing and accelerates growth of the world's fastest-growing racket sport.",
    category: "BROADCAST",
    date: "March 10, 2026",
    image: "/assets/images/article-placeholder.svg",
    alt: "Interactive sports broadcast experience on streaming platform",
    readTime: "4 min read"
  }]

};

export default function AuthorProfilePage() {
  const params = useParams();
  const slug = params?.slug as string;
  const [activeTab, setActiveTab] = useState<"articles" | "about">("articles");

  const author = authors[slug] || authors["staff-reporter"];

  // Real articles from the DB, fetched by author name (matches Ryan's
  // WordPress author byline). Falls back to the mock list only if the
  // fetch errors out, so we never render a blank page.
  const [articles, setArticles] = useState<AuthorArticle[]>([]);
  const [articleTotal, setArticleTotal] = useState<number>(author.articleCount);
  const [articlesLoading, setArticlesLoading] = useState(true);

  useEffect(() => {
    if (!slug) return;
    let cancelled = false;
    setArticlesLoading(true);
    fetch(`/api/author/${encodeURIComponent(slug)}?limit=500`, { cache: "no-store" })
      .then((r) => r.ok ? r.json() : null)
      .then((d) => {
        if (cancelled || !d) return;
        const live: AuthorArticle[] = (d.articles || []).map((a: any) => ({
          slug: a.slug,
          title: a.title,
          excerpt: a.excerpt || "",
          category: a.category || "News",
          date: a.date || "",
          image: a.image || "/assets/images/article-placeholder.svg",
          alt: a.alt || a.title,
          readTime: a.readTime || "1 min read",
        }));
        setArticles(live);
        if (typeof d.total === "number") setArticleTotal(d.total);
      })
      .catch(() => {
        if (cancelled) return;
        // Fallback: legacy hardcoded mock list, if any
        setArticles(authorArticles[slug] || []);
      })
      .finally(() => { if (!cancelled) setArticlesLoading(false); });
    return () => { cancelled = true; };
  }, [slug]);

  return (
    <>
      <Header />
      <main className="bg-[#111111] min-h-screen">
        {/* Cover Image */}
        <div className="relative h-40 md:h-52 overflow-hidden">
          <AppImage
            src={author.coverImage}
            alt={`${author.name} cover image`}
            width={1200}
            height={400}
            className="w-full h-full object-cover opacity-40" />
          
          <div className="absolute inset-0 bg-gradient-to-t from-[#111111] via-[#111111]/60 to-transparent" />
        </div>

        {/* Author Header */}
        <div className="max-w-container mx-auto px-4">
          <div className="relative -mt-16 md:-mt-20 mb-6">
            <div className="flex flex-col sm:flex-row sm:items-end gap-4">
              {/* Avatar */}
              <div className="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden border-4 border-[#111111] flex-shrink-0 bg-[#1a1a1a]">
                <AppImage
                  src={author.avatar}
                  alt={`${author.name} profile photo`}
                  width={112}
                  height={112}
                  className="w-full h-full object-cover" />
                
              </div>
              {/* Name + Meta */}
              <div className="pb-1 flex-1">
                <h1 className="font-heading text-2xl md:text-3xl font-bold text-[#e8e8e8] leading-tight">
                  {author.name}
                </h1>
                <p className="font-body text-sm text-[#3b82f6] mt-0.5">{author.title}</p>
                <div className="flex flex-wrap items-center gap-3 mt-2">
                  {author.location &&
                  <span className="font-body text-xs text-[#666] flex items-center gap-1">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                        <circle cx="12" cy="10" r="3" />
                      </svg>
                      {author.location}
                    </span>
                  }
                  <span className="font-body text-xs text-[#666]">Joined {author.joinedDate}</span>
                  <span className="font-body text-xs font-bold text-[#888]">
                    {articleTotal.toLocaleString()} articles
                  </span>
                </div>
              </div>
              {/* Social Links */}
              <div className="flex items-center gap-2 pb-1">
                {author.social.twitter &&
                <a
                  href={author.social.twitter}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={`${author.name} on Twitter`}
                  className="w-8 h-8 flex items-center justify-center bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] hover:text-[#3b82f6] text-[#888] transition-colors rounded-sm">
                  
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                    </svg>
                  </a>
                }
                {author.social.linkedin &&
                <a
                  href={author.social.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={`${author.name} on LinkedIn`}
                  className="w-8 h-8 flex items-center justify-center bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] hover:text-[#3b82f6] text-[#888] transition-colors rounded-sm">
                  
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                    </svg>
                  </a>
                }
                {author.social.email &&
                <a
                  href={`mailto:${author.social.email}`}
                  aria-label={`Email ${author.name}`}
                  className="w-8 h-8 flex items-center justify-center bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] hover:text-[#3b82f6] text-[#888] transition-colors rounded-sm">
                  
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                      <polyline points="22,6 12,13 2,6" />
                    </svg>
                  </a>
                }
              </div>
            </div>
          </div>

          {/* Specialties */}
          {author.specialties && author.specialties.length > 0 &&
          <div className="flex flex-wrap gap-2 mb-6">
              {author.specialties.map((spec) =>
            <span
              key={spec}
              className="font-body text-xs text-[#3b82f6] bg-[#1e3a5f]/30 border border-[#1e3a5f] px-2.5 py-1 rounded-sm">
              
                  {spec}
                </span>
            )}
            </div>
          }

          {/* Tabs */}
          <div className="flex gap-0 border-b border-[#2a2a2a] mb-6">
            <button
              onClick={() => setActiveTab("articles")}
              className={`font-body text-xs font-bold uppercase tracking-wider px-4 py-3 border-b-2 transition-colors ${
              activeTab === "articles" ? "border-[#3b82f6] text-[#3b82f6]" : "border-transparent text-[#666] hover:text-[#aaa]"}`
              }>
              
              Articles ({articlesLoading ? "…" : articleTotal.toLocaleString()})
            </button>
            <button
              onClick={() => setActiveTab("about")}
              className={`font-body text-xs font-bold uppercase tracking-wider px-4 py-3 border-b-2 transition-colors ${
              activeTab === "about" ? "border-[#3b82f6] text-[#3b82f6]" : "border-transparent text-[#666] hover:text-[#aaa]"}`
              }>
              
              About
            </button>
          </div>

          {/* Tab Content */}
          {activeTab === "articles" &&
          <div className="pb-10">
              {articles.length === 0 ?
            <div className="empty-state">
                  <p className="empty-state-title">No articles yet</p>
                  <p className="empty-state-desc">This author hasn't published any articles yet.</p>
                </div> :

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                  {articles.map((article) =>
              <Link
                key={article.slug}
                href={`/articles/${article.slug}`}
                className="group bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] transition-colors rounded-sm overflow-hidden article-card">
                
                      <div className="img-zoom h-44 overflow-hidden">
                        <AppImage
                    src={article.image}
                    alt={article.alt}
                    width={400}
                    height={176}
                    className="w-full h-full object-cover" />
                  
                      </div>
                      <div className="p-4">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="font-body text-[9px] font-bold uppercase tracking-widest text-[#3b82f6]">
                            {article.category}
                          </span>
                          <span className="font-body text-[10px] text-[#555]">·</span>
                          <span className="font-body text-[10px] text-[#555]">{article.readTime}</span>
                        </div>
                        <h3 className="font-heading text-sm font-bold text-[#e0e0e0] group-hover:text-[#3b82f6] transition-colors leading-snug mb-2 line-clamp-2">
                          {article.title}
                        </h3>
                        <p className="font-body text-xs text-[#777] leading-relaxed line-clamp-2 mb-3">
                          {article.excerpt}
                        </p>
                        <time className="font-body text-[10px] text-[#555]">{article.date}</time>
                      </div>
                    </Link>
              )}
                </div>
            }
            </div>
          }

          {activeTab === "about" &&
          <div className="max-w-2xl pb-10">
              <div className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-6">
                <p className="section-label mb-4">Biography</p>
                <p className="font-body text-sm text-[#aaaaaa] leading-relaxed">{author.bio}</p>

                <div className="mt-6 pt-6 border-t border-[#2a2a2a] grid grid-cols-2 gap-4">
                  <div>
                    <p className="font-body text-xs font-bold uppercase tracking-wider text-[#555] mb-1">Location</p>
                    <p className="font-body text-sm text-[#cccccc]">{author.location}</p>
                  </div>
                  <div>
                    <p className="font-body text-xs font-bold uppercase tracking-wider text-[#555] mb-1">Member Since</p>
                    <p className="font-body text-sm text-[#cccccc]">{author.joinedDate}</p>
                  </div>
                  <div>
                    <p className="font-body text-xs font-bold uppercase tracking-wider text-[#555] mb-1">Articles Published</p>
                    <p className="font-body text-sm text-[#cccccc]">{articleTotal.toLocaleString()}</p>
                  </div>
                  <div>
                    <p className="font-body text-xs font-bold uppercase tracking-wider text-[#555] mb-1">Contact</p>
                    {author.social.email ?
                  <a href={`mailto:${author.social.email}`} className="font-body text-sm text-[#3b82f6] hover:underline">
                        {author.social.email}
                      </a> :

                  <p className="font-body text-sm text-[#cccccc]">—</p>
                  }
                  </div>
                </div>
              </div>
            </div>
          }
        </div>

        {/* In-content 728x90 banner */}
        {ADS_728X90.length > 0 && (
          <div className="max-w-container mx-auto px-4 mt-10 hidden md:flex justify-center" aria-label="Advertisement">
            <AdImage ad={shuffle(ADS_728X90)[0]} page="authors" />
          </div>
        )}
      </main>
      <Footer />
    </>);

}