import { Mail, MapPin } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface User {
  name: string;
  avatar?: string;
  role?: string;
  bio?: string;
  location?: string;
  email?: string;
  verified?: boolean;
}

interface UserProfile1Props {
  user?: User;
  className?: string;
}

const UserProfile1 = ({
  user = {
    name: "الهام میرزایی",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
    role: "طراح ارشد محصول",
    bio: "طراحی تجربه‌های دیجیتال شهودی با تمرکز بر دسترس‌پذیری و رضایت کاربر. سابقه کار در فیگما و استرایپ.",
    location: "تهران، ایران",
    email: "elham.mirzaei@email.com",
    verified: true,
  },
  className,
}: UserProfile1Props) => {
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("");

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex justify-center">
        <Card className="w-full max-w-sm text-center">
          <CardHeader className="pb-0">
            <div className="flex flex-col items-center gap-4">
              <Avatar className="size-24">
                <AvatarImage
                  src={user.avatar}
                  alt={user.name}
                  className="object-cover"
                />
                <AvatarFallback className="text-xl font-semibold">
                  {initials}
                </AvatarFallback>
              </Avatar>
              <div className="space-y-1">
                <div className="flex items-center justify-center gap-2">
                  <h3 className="text-xl font-semibold">{user.name}</h3>
                  {user.verified && (
                    <Badge variant="secondary" className="text-xs">
                      تأیید‌شده
                    </Badge>
                  )}
                </div>
                {user.role && (
                  <p className="text-sm text-muted-foreground">{user.role}</p>
                )}
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-4 pt-6">
            {user.bio && (
              <p className="text-sm text-muted-foreground">{user.bio}</p>
            )}
            <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground">
              {user.location && (
                <div className="flex items-center gap-1.5">
                  <MapPin className="size-3.5" />
                  <span>{user.location}</span>
                </div>
              )}
              {user.email && (
                <div className="flex items-center gap-1.5">
                  <Mail className="size-3.5" />
                  <span dir="rtl">{user.email}</span>
                </div>
              )}
            </div>
          </CardContent>
          <CardFooter className="flex gap-2">
            <Button className="flex-1">پیام</Button>
            <Button variant="outline" className="flex-1">
              دنبال کردن
            </Button>
          </CardFooter>
        </Card>
      </div>
    </section>
  );
};

export { UserProfile1 };