import { useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import { FaCog } from 'react-icons/fa';
import { IoIosNotifications } from 'react-icons/io';
import { RootState } from '../../store/store';
import { UserState } from '../../store/slices/userSlice';

const SettingNav = () => {
  let { page1 } = useParams()
  const user: UserState = useSelector((state: RootState) => state.user);

  const initials = user.username
    ? user.username
        .split(' ')
        .map((n) => n[0])
        .join('')
        .slice(0, 2)
        .toUpperCase()
    : 'U';

  return (
    <header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
      <h1 className="text-md font-medium text-gray-800 capitalize">{page1}</h1>

      <div className="flex items-center">
        {/* Notification + Settings with smaller gap */}
        <div className="flex items-center">
          <button
            aria-label="Notifications"
            className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
          >
            <IoIosNotifications className="text-xl" />
          </button>

          <Link
            to="/settings"
            aria-label="Settings"
            className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
          >
            <FaCog className="text-sm" />
          </Link>
        </div>

        {/* Avatar with separate spacing */}
        <div className="w-9 h-9 ms-3 rounded-full overflow-hidden bg-[var(--primary)] flex items-center justify-center text-white font-semibold text-sm">
          {user.picture ? (
            <img
              src={user.picture}
              alt="User avatar"
              className="w-full h-full object-cover"
            />
          ) : (
            initials
          )}
        </div>
      </div>
    </header>
  );
};

export default SettingNav;