import { Mail, Phone } 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 User {
  name: string;
  avatar?: string;
  coverImage?: string;
  role?: string;
  department?: string;
  email?: string;
  phone?: string;
}

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

const UserProfile5 = ({
  user = {
    name: "مریم حسینی",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
    coverImage:
      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
    role: "طراح ارشد محصول",
    department: "تیم طراحی",
    email: "maryam.hosseini@company.com",
    phone: "+982112345678",
  },
  className,
}: UserProfile5Props) => {
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("");

  return (
    <Card
      dir="rtl"
      lang="fa"
      className={cn("w-full max-w-xs overflow-hidden pt-0", className)}
    >
      <div
        className="relative h-24 bg-muted bg-cover bg-center"
        style={{
          backgroundImage: user.coverImage
            ? `url(${user.coverImage})`
            : undefined,
        }}
      >
        <span className="absolute bottom-2 start-4 text-xs font-medium text-white drop-shadow-sm">
          {user.department}
        </span>
      </div>
      <CardContent className="-mt-10 flex flex-col items-center px-6 pb-6">
        <Avatar className="size-20 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>
        <h3 className="mt-4 text-lg font-semibold">{user.name}</h3>
        <p className="text-sm text-muted-foreground">{user.role}</p>

        <div className="mt-6 flex w-full gap-2">
          {user.email && (
            <Button variant="outline" size="sm" className="flex-1" asChild>
              <a href={`mailto:${user.email}`} className="inline-flex items-center gap-2">
                <Mail className="size-4" />
                ایمیل
              </a>
            </Button>
          )}
          {user.phone && (
            <Button variant="outline" size="sm" className="flex-1" asChild>
              <a href={`tel:${user.phone}`} className="inline-flex items-center gap-2">
                <Phone className="size-4" />
                تماس
              </a>
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

export { UserProfile5 };