1  import { Button } from "@/components/ui/button"
 2  import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 3  import { CalendarDays, MapPin, LinkIcon } from 'lucide-react'
 4  import { useAccount } from 'wagmi'
 5  
 6  
 7  interface ProfileHeaderProps {
 8    username: string
 9    handle: string
10    bio: string
11    location: string
12    website: string
13    joinDate: string
14    followersCount: number
15    followingCount: number
16  }
17  
18  export function ProfileHeader({
19    username,
20    handle,
21    bio,
22    location,
23    website,
24    joinDate,
25    followersCount,
26    followingCount
27  }: ProfileHeaderProps) {
28    const { isConnected, address } = useAccount()
29  
30    return (
31      <div className="border-b pb-4">
32        <div className="h-48 bg-gray-200" />
33        <div className="px-4">
34          <div className="flex justify-between items-start">
35            <Avatar className="w-32 h-32 border-4 border-white -mt-16">
36              <AvatarImage src="/placeholder-avatar.jpg" alt={username} />
37              {isConnected && <AvatarFallback>{username[0]}</AvatarFallback>}
38            </Avatar>
39            {isConnected && <Button className="mt-4">Edit profile</Button>}
40          </div>
41          <div className="mt-4">
42            <h2 className="text-2xl font-bold">{username}</h2>
43            <p className="text-gray-500">@{handle}</p>
44          </div>
45          <p className="mt-4">{bio}</p>
46          <div className="flex flex-wrap gap-y-2 mt-4 text-gray-500">
47            {location && (
48              <div className="flex items-center mr-4">
49                <MapPin size={18} className="mr-2" />
50                <span>{location}</span>
51              </div>
52            )}
53            {website && (
54              <div className="flex items-center mr-4">
55                <LinkIcon size={18} className="mr-2" />
56                <a href={website} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
57                  {website}
58                </a>
59              </div>
60            )}
61            <div className="flex items-center">
62              <CalendarDays size={18} className="mr-2" />
63              <span>Joined {joinDate}</span>
64            </div>
65          </div>
66          <div className="flex mt-4 space-x-4">
67            <span><strong>{followingCount}</strong> Following</span>
68            <span><strong>{followersCount}</strong> Followers</span>
69          </div>
70        </div>
71      </div>
72    )
73  }
74