// src/components/Profile/ProfileHeader.tsx
import { Heart, MessageCircle, Share2 } from "lucide-react"

type Props = {
  username: string
  avatarUrl?: string
  // mock: backend gelince gerçek değerleri buradan beslersin
  totalLikes?: number
  totalShares?: number
  totalComments?: number
}

export default function ProfileHeader({
  username,
  avatarUrl,
  totalLikes ,
  totalShares ,
  totalComments ,
}: Props) {
  return (
    <div className="w-full rounded-3xl bg-surface border border-border overflow-hidden">
      {/* Top */}
      <div className="px-6 py-8 sm:px-10 sm:py-10 bg-background/40">
        <div className="flex flex-col sm:flex-row items-center sm:items-end gap-5">
          <div className="relative w-28 h-28 sm:w-32 sm:h-32 shrink-0">
            <img
              src={
                avatarUrl ||
                `${import.meta.env.BASE_URL}placeholders/placeholder-profile.png`
              }
              alt={username}
              className="w-full h-full rounded-full object-cover border-4 border-surface shadow-sm"
            />
          </div>

          <div className="text-center sm:text-left">
            <h2 className="text-2xl sm:text-3xl font-semibold text-text">
              {username}
            </h2>
            <div className="mt-2 text-sm text-text-muted">
              Profil özeti
            </div>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="px-6 py-5 sm:px-10 sm:py-6">
        <div className="grid grid-cols-3 gap-3">
          <div className="rounded-2xl bg-background border border-border p-4 text-center">
            <div className="inline-flex items-center gap-2 text-xs text-text-muted">
              <Heart className="w-4 h-4" />
              Toplam Beğeni
            </div>
            <div className="mt-2 text-xl font-extrabold text-text">
              {totalLikes}
            </div>
          </div>

          <div className="rounded-2xl bg-background border border-border p-4 text-center">
            <div className="inline-flex items-center gap-2 text-xs text-text-muted">
              <Share2 className="w-4 h-4" />
              Toplam Paylaşım
            </div>
            <div className="mt-2 text-xl font-extrabold text-text">
              {totalShares}
            </div>
          </div>

          <div className="rounded-2xl bg-background border border-border p-4 text-center">
            <div className="inline-flex items-center gap-2 text-xs text-text-muted">
              <MessageCircle className="w-4 h-4" />
              Toplam Yorum
            </div>
            <div className="mt-2 text-xl font-extrabold text-text">
              {totalComments}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
