import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Send } from "lucide-react";

function User() {
  return (
    <Popover>
      <PopoverTrigger className="flex items-center gap-2">
        <Avatar>
          <AvatarFallback>PJ</AvatarFallback>
        </Avatar>
        <span className="font-medium">Praveen Juge</span>
      </PopoverTrigger>
      <PopoverContent className="grid w-80 gap-4 p-4 text-sm">
        <div className="flex items-center gap-3">
          <Avatar className="size-8">
            <AvatarFallback>PJ</AvatarFallback>
          </Avatar>
          <div>
            <div className="font-medium">Praveen Juge</div>
            <div className="text-muted-foreground">hi@praveenjuge.com</div>
          </div>
        </div>
        <div className="text-muted-foreground">
          Praveen is designer that specialize in UI design, accessibility, CSS
          and design systems with a knack for pixel-perfect outcomes.
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="flex-1">
            View Profile
          </Button>
          <Button className="flex-1">
            <Send className="mr-2 size-4" />
            Message
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

export { User }