"use client";

import TopHeaderBg from "@/shared/icons/top-header/topHeaderBg.svg";
import TopHeaderLogo from "@/shared/icons/top-header/topHeaderLogo.svg";
import { RootState } from "@/store";
import { useSelector } from "react-redux";

const TopHeader = () => {
  const user = useSelector((state: RootState) => state.auth.user);

  return (
    <div className="z-0 relative h-[134px] mt-[-12px] rounded-br-[16px] rounded-bl-[16px] bg-[linear-gradient(89.87deg,_#C7C7E4_-94.99%,_#5356A6_-39.94%,_#0D0E2B_26.62%)]">
      <TopHeaderBg className="absolute right-0 z-0" />
      <div className="container mx-auto relative z-1 h-full">
        <div className="basis-7/12 h-full flex items-center justify-between text-white">
          <h2 className="text-[32px] leading-[140%]">Welcome To FLOW : {user?.username}</h2>
          <TopHeaderLogo />
        </div>
      </div>
    </div>
  )
}

export default TopHeader