import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Bookmark, Star, Flag, Clock } from "lucide-react"; import { cn } from "@/lib/utils"; interface ProfileCardProps { name: string; title: string; description?: string; profileImage?: string; profileImageAlt?: string; backgroundImage?: string; company?: { name: string; icon?: React.ReactNode; color?: string; }; rating?: number; hourlyRate?: string | number; projectCount?: number; timeUnit?: string; onContact?: () => void; onBookmark?: () => void; contactButtonText?: string; isBookmarked?: boolean; className?: string; showStats?: boolean; } const ProfileCard = React.forwardRef( ( { name, title, description, profileImage = "https://images.pexels.com/photos/33485275/pexels-photo-33485275.jpeg", profileImageAlt, backgroundImage = "/devvarena-ui-assets/pattern-bg.png", company, rating = 5.0, hourlyRate = "$150", projectCount = 24, timeUnit = "Month", onContact, onBookmark, contactButtonText = "Get In Touch", isBookmarked = false, className, showStats = true, ...props }, ref ) => { const formatRate = (rate: string | number) => { if (typeof rate === "number") { return `$${rate}`; } return rate; }; return ( {/* Background Header */}

{/* Profile Image and Company Badge */}

{company && ( )}

{/* Profile Info */}

{name}

{title} {description && (

{description}

)}

{onBookmark && ( )}

{/* Stats */} {showStats && (

{rating}

Rating

{formatRate(hourlyRate)}

hours

{projectCount}

{timeUnit}

)}

{/* Contact Button */} ); } ); ProfileCard.displayName = "ProfileCard"; export default ProfileCard;

Profile Card