"use client";

import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
import FooterColumns from "@/components/shared/FooterColumns";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import type { FooterColumn } from "@/components/shared/FooterColumns";

type MediaProps =
    | {
        imageSrc: string;
        imageAlt?: string;
        videoSrc?: never;
        videoAriaLabel?: never;
    }
    | {
        videoSrc: string;
        videoAriaLabel?: string;
        imageSrc?: never;
        imageAlt?: never;
    };

type FooterMediaProps = MediaProps & {
    // logoSrc?: string;
    logoText?: string;
    // logoWidth?: number;
    // logoHeight?: number;
    columns: FooterColumn[];
    copyrightText?: string;
    onPrivacyClick?: () => void;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    mediaWrapperClassName?: string;
    mediaClassName?: string;
    // logoClassName?: string;
    logoTextClassName?: string;
    columnsClassName?: string;
    columnClassName?: string;
    columnTitleClassName?: string;
    columnItemClassName?: string;
    copyrightContainerClassName?: string;
    copyrightTextClassName?: string;
    privacyButtonClassName?: string;
};

const FooterMedia = ({
    imageSrc,
    videoSrc,
    imageAlt = "",
    videoAriaLabel = "Footer video",
    // logoSrc = "/brand/logowhite.svg",
    logoText = "Webild",
    // logoWidth = 120,
    // logoHeight = 40,
    columns,
    copyrightText = `© 2025 | Webild`,
    onPrivacyClick,
    ariaLabel = "Site footer",
    className = "",
    containerClassName = "",
    mediaWrapperClassName = "",
    mediaClassName = "",
    // logoClassName = "",
    logoTextClassName = "",
    columnsClassName = "",
    columnClassName = "",
    columnTitleClassName = "",
    columnItemClassName = "",
    copyrightContainerClassName = "",
    copyrightTextClassName = "",
    privacyButtonClassName = "",
}: FooterMediaProps) => {
    return (
        <footer
            role="contentinfo"
            aria-label={ariaLabel}
            className={cls("relative overflow-hidden w-full mt-20", className)}
        >
            <div className={cls("w-full aspect-square md:aspect-[16/6] mask-fade-top-long", mediaWrapperClassName)}>
                <MediaContent
                    imageSrc={imageSrc}
                    videoSrc={videoSrc}
                    imageAlt={imageAlt}
                    videoAriaLabel={videoAriaLabel}
                    imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
                />
            </div>

            <div className="primary-button text-background py-15">
                <div
                    className={cls("relative w-content-width mx-auto z-10", containerClassName)}
                >
                    <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
                        {/* {logoSrc ? (
                            <div className="flex-shrink-0">
                                <Image
                                    src={logoSrc}
                                    alt="Logo"
                                    width={logoWidth}
                                    height={logoHeight}
                                    className={cls("object-contain", logoClassName)}
                                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
                                    aria-hidden={true}
                                />
                            </div>
                        ) : ( */}
                            <h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
                                {logoText}
                            </h2>
                        {/* )} */}

                        <FooterColumns
                            columns={columns.filter(column => column.title === "Game" || column.title === "Community")}
                            className={columnsClassName}
                            columnClassName={columnClassName}
                            columnTitleClassName={cls("text-background/50", columnTitleClassName)}
                            columnItemClassName={cls("text-background", columnItemClassName)}
                        />
                    </div>

                    <div
                        className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
                    >
                        <span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
                            {copyrightText}
                        </span>
                        <ButtonTextUnderline
                            text="Privacy Policy"
                            onClick={onPrivacyClick}
                            className={cls("text-background/50", privacyButtonClassName)}
                        />
                    </div>
                </div>
            </div>
        </footer>
    );
};

FooterMedia.displayName = "FooterMedia";

export default FooterMedia;