import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { ArrowRight, CheckCircle2 } from 'lucide-react';
import { forwardRef } from 'react';
import FadeUp, { ease } from './FadeUp';
import { tabs } from './tabs-config';

const ModuleTabsSection = forwardRef<
    HTMLElement,
    { activeTab: string; onTabChange: (value: string) => void }
>(function ModuleTabsSection({ activeTab, onTabChange }, ref) {
    return (
        <section ref={ref} className="pf-section pf-section-tint">
            <div className="pf-container">
                <Tabs value={activeTab} onValueChange={onTabChange}>
                    <FadeUp>
                        <TabsList className="mb-12 flex h-auto flex-wrap justify-center gap-2 bg-transparent p-0">
                            {tabs.map((tab) => (
                                <TabsTrigger
                                    key={tab.value}
                                    value={tab.value}
                                    className="border-border bg-card text-muted-foreground hover:text-foreground data-[state=active]:border-primary/40 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-primary/20 flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all data-[state=active]:shadow-md"
                                >
                                    <tab.icon className="h-4 w-4" />
                                    {tab.label}
                                </TabsTrigger>
                            ))}
                        </TabsList>
                    </FadeUp>

                    {tabs.map((tab) => (
                        <TabsContent key={tab.value} value={tab.value}>
                            <div className="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
                                <motion.div
                                    initial={{ opacity: 0, x: -20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ duration: 0.4, ease }}
                                >
                                    <div className="pf-icon-box mb-5 h-12 w-12 rounded-2xl">
                                        <tab.icon className="h-6 w-6" />
                                    </div>
                                    <h2 className="pf-display text-foreground mb-4 text-2xl font-bold md:text-3xl">
                                        {tab.headline}
                                    </h2>
                                    <p className="text-muted-foreground mb-8 leading-relaxed">
                                        {tab.sub}
                                    </p>
                                    <ul className="space-y-2.5">
                                        {tab.features.map((f) => (
                                            <li
                                                key={f}
                                                className="flex items-start gap-3"
                                            >
                                                <CheckCircle2 className="text-primary mt-0.5 h-4 w-4 shrink-0" />
                                                <span className="text-muted-foreground text-sm leading-relaxed">
                                                    {f}
                                                </span>
                                            </li>
                                        ))}
                                    </ul>
                                    <Link
                                        href="/get-started"
                                        className="pf-btn mt-8 inline-flex items-center gap-2"
                                    >
                                        Try free for 30 days{' '}
                                        <ArrowRight className="h-4 w-4" />
                                    </Link>
                                </motion.div>
                                <motion.div
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ duration: 0.4, ease }}
                                    className="flex justify-center"
                                >
                                    {tab.mock}
                                </motion.div>
                            </div>
                        </TabsContent>
                    ))}
                </Tabs>
            </div>
        </section>
    );
});

export default ModuleTabsSection;