import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../../../@/components/ui/dropdown-menu";
import { Avatar } from "../../atoms";
import { Link } from "@remix-run/react";
import { HomeIcon, LogOut, Settings, User, UserPlus, Users } from "lucide-react";
import { Profile, ProfileProps } from "../../molecules";

type AvatarDropDownProps = {
  avatar: ProfileProps,
  uuid: string,
  links?: any[]
};

const AvatarDropDown = ({
  avatar,
  links,
  uuid
}: AvatarDropDownProps) => {

  return <DropdownMenu>
    <DropdownMenuTrigger className="items-center px-2">
      <Avatar className="border-2 border-primary-300" />
    </DropdownMenuTrigger>
    <DropdownMenuContent className="bg-white mr-9 w-[320px] font-medium text-mono-700">
      <DropdownMenuItem className="flex p-2.5">
        <Profile {...avatar} />
      </DropdownMenuItem>
      <DropdownMenuSeparator className="bg-[#EAECF0]" />
      <Link to={`/profile/${uuid}`}>
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <User color="#667085" size={16} />
          View profile
        </DropdownMenuItem>
      </Link>
      <Link to="/settings">
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <Settings color="#667085" size={16} />
          Settings
        </DropdownMenuItem>
      </Link>

      <DropdownMenuSeparator className="bg-[#EAECF0]" />

      <Link to="/company">
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <HomeIcon color="#667085" size={16} />
          Company profile
        </DropdownMenuItem>
      </Link>

      <Link to="/team">
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <Users color="#667085" size={16} />
          Team
        </DropdownMenuItem>
      </Link>

      <Link to="/invite">
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <UserPlus color="#667085" size={16} />
          Invite colleagues
        </DropdownMenuItem>
      </Link>
      <DropdownMenuSeparator className="bg-[#EAECF0]" />

      <Link to="/logout">
        <DropdownMenuItem className="gap-2 px-2 py-2">
          <LogOut color="#667085" size={16} />
          Logout
        </DropdownMenuItem>
      </Link>
    </DropdownMenuContent>
  </DropdownMenu>
};

export { AvatarDropDown, AvatarDropDownProps };
