import { BadgeCheck, MessageSquare, Pencil, Plus } from "lucide-react";

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

interface Stat {
  label: string;
  value: string;
}

interface User {
  name: string;
  username: string;
  avatar?: string;
  coverImage?: string;
  bio?: string;
  verified?: boolean;
}

interface UserProfile12Props {
  user?: User;
  stats?: Stat[];
  className?: string;
}

const UserProfile12 = ({
  user = {
    name: "امیر رضایی",
    username: "@amir_rezaei",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
    coverImage:
      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
    bio: "توسعه‌دهنده فول‌استک با علاقه به ساخت وب‌اپلیکیشن‌های زیبا و پرفورمنس. مشارکت‌کننده متن‌باز و علاقه‌مند به TypeScript.",
    verified: true,
  },
  stats = [
    { label: "پست‌ها", value: "۸۴۷" },
    { label: "دنبال‌شده", value: "۳۱۲" },
    { label: "دنبال‌کننده", value: "۸۹ هزار" },
  ],
  className,
}: UserProfile12Props) => {
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("");

  return (
    <Card
      dir="rtl"
      lang="fa"
      className={cn("w-full max-w-md overflow-hidden pt-0", className)}
    >
      <div
        className="h-36 bg-muted bg-cover bg-center"
        style={{
          backgroundImage: user.coverImage
            ? `url(${user.coverImage})`
            : undefined,
        }}
      />

      <CardContent className="relative px-6 pb-6">
        <Avatar className="-mt-14 size-28 border-4 border-card shadow-lg">
          <AvatarImage
            src={user.avatar}
            alt={user.name}
            className="object-cover"
          />
          <AvatarFallback className="text-xl font-semibold">
            {initials}
          </AvatarFallback>
        </Avatar>

        <Button
          variant="outline"
          size="sm"
          className="absolute top-4 end-6 gap-1.5"
        >
          <Pencil className="size-3.5" />
          ویرایش پروفایل
        </Button>

        <div className="mt-3">
          <div className="flex items-center gap-2">
            <h2 className="text-xl font-bold">{user.name}</h2>
            {user.verified && (
              <BadgeCheck className="size-6 fill-sky-500 text-card" />
            )}
          </div>
          <p className="text-muted-foreground" dir="rtl">
            {user.username}
          </p>
        </div>

        <div className="mt-4 flex items-center gap-2">
          <Button className="gap-1.5">
            <Plus className="size-4" />
            دنبال کردن
          </Button>
          <Button variant="outline" size="icon" aria-label="پیام">
            <MessageSquare className="size-4" />
          </Button>
        </div>

        {user.bio && (
          <p className="mt-5 text-sm text-muted-foreground">{user.bio}</p>
        )}

        <div className="mt-6 flex items-center justify-between border-t pt-6">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="text-xl font-bold">{stat.value}</div>
              <div className="text-sm text-muted-foreground">{stat.label}</div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export { UserProfile12 };