import Link from "next/link";
import {PROFILE_URL} from "@/lib/constants";

export default function UserUpdateBanner() {
    return (
        <div
            className="flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
            <div className="flex items-center mx-auto">
                <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
                    <span
                        className="inline-flex p-1 me-3 bg-gray-200 rounded-full dark:bg-gray-600 w-6 h-6 items-center justify-center flex-shrink-0">
                        <svg className="w-3 h-3 text-gray-500 dark:text-gray-400" aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 19">
                            <path
                                d="M15 1.943v12.114a1 1 0 0 1-1.581.814L8 11V5l5.419-3.871A1 1 0 0 1 15 1.943ZM7 4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2v5a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V4ZM4 17v-5h1v5H4ZM16 5.183v5.634a2.984 2.984 0 0 0 0-5.634Z"/>
                        </svg>
                        <span className="sr-only">Light bulb</span>
                    </span>
                    <span>
                        Keep your profile up-to-date. <Link
                        href={PROFILE_URL}
                        className="inline font-medium text-green-600 underline dark:text-green-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">
                    Update profile</Link>
                    </span>
                </p>
            </div>
        </div>
    )
}