"use client";

import { Play, Zap } from "lucide-react";
import { clsx } from "clsx";

interface LogoProps {
    size?: "sm" | "md" | "lg";
    showText?: boolean;
    className?: string;
}

export default function Logo({ size = "md", showText = true, className }: LogoProps) {
    const iconSizes = {
        sm: "w-5 h-5",
        md: "w-8 h-8",
        lg: "w-12 h-12"
    };

    const containerSizes = {
        sm: "w-8 h-8 rounded-lg",
        md: "w-14 h-14 rounded-2xl",
        lg: "w-20 h-20 rounded-[2.5rem]"
    };

    const textSizes = {
        sm: "text-lg",
        md: "text-2xl",
        lg: "text-4xl"
    };

    return (
        <div className={clsx("flex items-center gap-4", className)}>
            <div className={clsx(
                "relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-500 to-indigo-700 shadow-lg shadow-indigo-500/20",
                containerSizes[size]
            )}>
                {/* Background Pattern */}
                <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,1),transparent)]" />

                {/* Icons */}
                <div className="relative">
                    <Play className={clsx("text-white fill-white", iconSizes[size])} />
                    <Zap className={clsx(
                        "absolute -top-1 -right-1 text-white fill-white drop-shadow-md",
                        size === "sm" ? "w-3 h-3" : size === "md" ? "w-5 h-5" : "w-8 h-8"
                    )} />
                </div>
            </div>

            {showText && (
                <div className="flex flex-col">
                    <h1 className={clsx("font-black tracking-tighter leading-none text-white", textSizes[size])}>
                        MovieHub<span className="text-accent-cyan font-bold uppercase tracking-widest pl-1">BD</span>
                    </h1>
                    <p className={clsx(
                        "font-bold uppercase tracking-[0.2em] text-white/50 mt-1",
                        size === "sm" ? "text-[8px]" : size === "md" ? "text-[10px]" : "text-sm"
                    )}>
                        Professional Encoding System
                    </p>
                </div>
            )}
        </div>
    );
}