'use client';
import Link from 'next/link';

import {
    Instagram, MapPin, Download
} from 'lucide-react';

type UserProps = {
    User: {
        fullName: string;
        instagram?: string;
        city?: string;
    } | null;
};

const UserWelcomeFullScreen = ({User}: UserProps) => {

    console.log(User);

    return (
        <section
            className={`flex items-center justify-center w-full h-full p-2 md:p-10 rounded-2xl bg-white/60 shadow-[5px_5px_10px_0_rgba(158,119,122,0.4)]`}>
            <div className={`flex w-full max-w-[600px] items-center justify-center flex-col gap-10`}>
                <div className={`flex items-center justify-center flex-col gap-2`}>
                    <img
                        className="mb-9 rounded-full border-2 border-white
                        shadow-[0_6px_12px_0_rgba(118,98,95,0.75)]"
                        src={`https://ui-avatars.com/api/?name=${encodeURIComponent(
                            User?.fullName || 'User'
                        )}&background=272666&color=fff&size=200`}
                        alt="User avatar"
                    />
                    <h2 className={`text-xl md:text-3xl font-normal`}>Welcome!</h2>
                    <h3 className={`text-3xl md:text-6xl font-semibold mb-3`}>{User?.fullName}</h3>
                    <div className="flex justify-center gap-5">
                        {User?.instagram && (
                            <Link
                                href={User.instagram}
                                target="_blank"
                                className="flex items-center gap-1 text-gray-500 hover:text-gray-700"
                            >
                                <Instagram size={16}/>
                                <span>Visit Instagram</span>
                            </Link>
                        )}

                        {User?.city && (
                            <div className="flex items-center gap-1 text-gray-500">
                                <MapPin size={16}/>
                                <span>{User.city}</span>
                            </div>
                        )}
                    </div>
                </div>

                <Link
                    href="/pdf/mny-lumi-massvocacy-brief.docx"
                    target="_blank"
                    className={`flex items-center gap-2 py-4 px-8 md:py-5 md:px-15 rounded-4xl font-semibold text-xl text-white cursor-pointer`}
                    style={{
                        background: 'linear-gradient(270deg, #D76368 -1.41%, #A25FA3 100%), #272666',
                    }}
                >
                    <Download size={24}/>
                    <span>Download Campaign Brief</span>
                </Link>
                <div className={`flex items-center justify-center flex-col gap-4`}>
                    <h2 className={`text-3xl md:text-4xl font-semibold text-blue1`}>Stay Tuned</h2>
                    <p className={`text-xl font-normal text-center`}>Our dashboard is getting updated with
                        exciting new
                        features. More information will be available soon.</p>
                </div>
            </div>
        </section>
    );
};

export default UserWelcomeFullScreen;