"use client";

import { Download, Move } from "lucide-react";
import { SectionHeader } from "./title";

type Props = {
    baseCanvasRef: React.RefObject<HTMLCanvasElement | null>;
    overlayCanvasRef: React.RefObject<HTMLCanvasElement | null>;
    text: string;
    onPointerDown: ( e: React.PointerEvent<HTMLCanvasElement> ) => void;
    onPointerMove: ( e: React.PointerEvent<HTMLCanvasElement> ) => void;
    onPointerUp: ( e: React.PointerEvent<HTMLCanvasElement> ) => void;
    downloadAvatar: () => void;
};

export function PreviewPanel ( {
    baseCanvasRef,
    overlayCanvasRef,
    text,
    onPointerDown,
    onPointerMove,
    onPointerUp,
    downloadAvatar,
}: Props ) {
    return (
        <section aria-labelledby="preview-title" className="h-fit lg:sticky lg:top-8">
            <section className="rounded-3xl border border-white/8 bg-slate-950/70 p-8 shadow-[0_10px_40px_-20px_rgba(0,0,0,.6)] backdrop-blur-xl">
                <SectionHeader
                    title="Vorschau"
                    subtitle="Ziehe den Text direkt im Canvas"
                    icon={ Move }
                    accent="indigo"
                />

                <div className="group relative mb-6">
                    <div className="absolute -inset-1 rounded-2xl bg-gradient-to-r from-indigo-600 to-violet-600 opacity-20 blur transition duration-300 group-hover:opacity-40" />

                    <div className="relative overflow-hidden rounded-2xl border border-white/5 bg-slate-950 p-2">
                        <div className="relative">
                            <canvas
                                ref={ baseCanvasRef }
                                className="block h-auto w-full max-w-full rounded-xl shadow-2xl"
                            />

                            <canvas
                                ref={ overlayCanvasRef }
                                className={ `absolute inset-0 block h-auto w-full max-w-full rounded-xl ${ text ? "cursor-move" : "" }` }
                                onPointerDown={ onPointerDown }
                                onPointerMove={ onPointerMove }
                                onPointerUp={ onPointerUp }
                                onPointerCancel={ onPointerUp }
                                style={ { touchAction: "none" } }
                            />
                        </div>
                    </div>
                </div>

                <button
                    onClick={ downloadAvatar }
                    className="group flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-6 py-4 font-bold text-white shadow-lg shadow-indigo-900/20 transition-all duration-300 hover:scale-105 hover:from-indigo-500 hover:to-violet-500 hover:shadow-indigo-800/30"
                >
                    <Download className="h-5 w-5 group-hover:animate-bounce" />
                    Avatar herunterladen
                </button>
            </section>
        </section>
    );
}