import { Mail, Phone, MapPin, Link2, Calendar, Edit, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

export function UserProfileBlock() {
  return (
    <Card className="max-w-md mx-auto shadow-sm">
      <CardHeader className="relative pt-8 pb-4">
        <div className="absolute right-6 top-6 flex gap-2">
          <Button variant="ghost" size="icon">
            <Edit className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon">
            <Settings className="h-4 w-4" />
          </Button>
        </div>
        <div className="flex flex-col items-center space-y-4">
          <div className="relative">
            <img
              src="/avatar-woman-1.png"
              alt="User avatar"
              className="h-24 w-24 rounded-full object-cover border-4 border-background"
            />
            <div className="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-emerald-500 border-2 border-background"></div>
          </div>
          <div className="text-center space-y-2">
            <h2 className="text-xl font-bold tracking-tight">Sarah Johnson</h2>
            <p className="text-sm text-muted-foreground">Senior Product Designer</p>
            <div className="flex gap-2 justify-center flex-wrap">
              <Badge variant="secondary">Design</Badge>
              <Badge variant="secondary">UX</Badge>
              <Badge variant="secondary">Research</Badge>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-6 space-y-6">
        <div className="space-y-4">
          <div className="flex items-center gap-3">
            <Mail className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <span className="text-sm">sarah.johnson@example.com</span>
          </div>
          <div className="flex items-center gap-3">
            <Phone className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <span className="text-sm">(555) 123-4567</span>
          </div>
          <div className="flex items-center gap-3">
            <MapPin className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <span className="text-sm">San Francisco, CA</span>
          </div>
          <div className="flex items-center gap-3">
            <Link2 className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <a href="#" className="text-sm text-primary hover:underline">
              portfolio.design
            </a>
          </div>
          <div className="flex items-center gap-3">
            <Calendar className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <span className="text-sm">Joined April 2021</span>
          </div>
        </div>

        <Separator />

        <div className="space-y-2">
          <h3 className="text-sm font-medium">About</h3>
          <p className="text-sm text-muted-foreground leading-relaxed">
            Product designer with 5+ years of experience in creating user-centered digital products. Passionate about
            solving complex problems through design thinking and collaboration.
          </p>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between border-t p-6 gap-4">
        <Button variant="outline" className="flex-1">
          Message
        </Button>
        <Button className="flex-1">View Full Profile</Button>
      </CardFooter>
    </Card>
  )
}