import React from 'react';
import { useNavigate } from 'react-router-dom';
import logo from '../../../assets/logoPR.svg';
import avatar from '../../../assets/avatar.png';

interface HeaderProps {
  variant: 'default' | 'minimal';
  user?: UserI | null;
}

const Header: React.FC<HeaderProps> = ({ variant, user }) => {
  const navigate = useNavigate();
  const role =
    user?.role === 'inst_designer'
      ? 'Instructor Designer'
      : user?.role === 'school'
      ? 'School'
      : user?.role === 'teacher'
      ? 'Teacher'
      : user?.role === 'admin'
      ? 'Admin'
      : user?.role === 'super_admin'
      ? 'Super Admin'
      : 'inst_admin';
  return (
    <div className="w-full bg-white h-20 flex items-center justify-between px-14 py-10 border-b sticky z-50 top-0">
      <div
        className="flex items-center hover:cursor-pointer"
        onClick={() => {
          navigate('/dashboard/home');
        }}
      >
        <img  src={logo} alt="logo" draggable="false" />
      </div>
      {variant === 'default' ? (
        <div className="flex flex-row gap-3 justify-center items-center">
          <img
            src={avatar}
            draggable="false"
            alt="avatar"
            className="w-12 h-12 rounded-full"
          />
          <div className="flex flex-col items-start gap-1">
            <div className="text-md font-semibold">
              {role === 'School'
                ? (user as SchoolI)?.schoolName
                : `${user?.firstName} ${user?.lastName}`}
            </div>
            <div className="bg-purple-200 px-2 rounded-2xl border border-purple-700">
              <div className="text-center text-purple-800 text-[10px] font-medium">
                {role}
              </div>
            </div>
          </div>
        </div>
      ) : (
        <span
          onClick={() => {
            navigate('/dashboard/home');
          }}
          className="text-amber-500 font-medium hover:underline hover:cursor-pointer"
        >
          Return to Dashboard
        </span>
      )}
    </div>
  );
};

export default Header;