"use client"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import Link from "next/link"

interface FeatureSectionProps {
    title: string
    oversizedTitle: string
    description: string
    ctaText?: string
    reversed?: boolean
    accentColor?: string
    children?: React.ReactNode
    href?: string
    customCTA?: React.ReactNode
    externalLink?: boolean
}

const FeatureSection = ({
    title,
    oversizedTitle,
    description,
    ctaText,
    reversed = false,
    accentColor = "text-primary",
    children,
    href,
    customCTA,
    externalLink = false
}: FeatureSectionProps) => {
    return (
        <section className="py-12 md:py-16 overflow-hidden">
            <div className="max-w-7xl mx-auto px-6">
                <div className={cn(
                    "flex flex-col lg:flex-row items-center gap-12 lg:gap-16",
                    reversed && "lg:flex-row-reverse"
                )}>
                    {/* Content */}
                    <div className="flex-1 space-y-8 w-full">
                        <div className="space-y-2">
                            <h3 className={cn("text-6xl md:text-8xl font-black uppercase tracking-tighter opacity-20", accentColor)}>
                                {oversizedTitle}
                            </h3>
                            <h2 className="text-3xl md:text-4xl font-bold tracking-tight -mt-8 md:-mt-12 ml-2">
                                {title}
                            </h2>
                        </div>

                        <p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-xl">
                            {description}
                        </p>

                        {customCTA ? (
                            customCTA
                        ) : (ctaText && (
                            href ? (
                                <Button asChild variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
                                    {externalLink ? (
                                        <a href={href} target="_blank" rel="noopener noreferrer">{ctaText}</a>
                                    ) : (
                                        <Link href={href}>{ctaText}</Link>
                                    )}
                                </Button>
                            ) : (
                                <Button variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
                                    {ctaText}
                                </Button>
                            )
                        ))}
                    </div>

                    {/* Visual */}
                    <div className={cn(
                        "flex-1 w-full flex justify-center",
                        reversed ? "order-first lg:order-last" : "order-last"
                    )}>
                        {children ? (
                            <div className="w-full">
                                {children}
                            </div>
                        ) : (
                            <div className="relative group w-full max-w-[500px]">
                                <div className={cn(
                                    "absolute inset-0 blur-3xl opacity-20 rounded-full transition-all duration-500 scale-110 group-hover:scale-125",
                                    accentColor.replace("text-", "bg-")
                                )} />
                                <Card className="relative w-full aspect-[4/3] md:aspect-video md:w-[500px] md:h-[350px] bg-white shadow-2xl rounded-[2.5rem] overflow-hidden border-none transform transition-transform duration-700 group-hover:scale-105">
                                    <div className="w-full h-full bg-slate-50 flex items-center justify-center">
                                        <div className={cn("w-20 h-20 rounded-full opacity-20", accentColor.replace("text-", "bg-"))} />
                                    </div>
                                </Card>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    )
}

export default FeatureSection