"use client"

import { useLocale } from "@/lib/i18n/context"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import type { Profile } from "@/lib/mock-data"
import { Calendar, MessageSquare, FileText, Star } from "lucide-react"

export function ProfileHeader({ profile }: { profile: Profile }) {
  const { t } = useLocale()
  const initials = profile.display_name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()

  const joinDate = new Date(profile.created_at).toLocaleDateString("tr-TR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })

  return (
    <div className="flex flex-col items-center gap-4 rounded-lg border border-border bg-card p-6 sm:flex-row sm:items-start">
      <Avatar className="h-20 w-20 text-2xl">
        <AvatarFallback className="bg-primary/10 text-primary font-semibold">
          {initials}
        </AvatarFallback>
      </Avatar>

      <div className="flex flex-1 flex-col items-center gap-3 sm:items-start">
        <div className="text-center sm:text-left">
          <h1 className="text-xl font-bold text-foreground">{profile.display_name}</h1>
          <p className="text-sm text-muted-foreground">@{profile.username}</p>
        </div>
        {profile.bio && (
          <p className="text-sm leading-relaxed text-muted-foreground">{profile.bio}</p>
        )}
        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
          <span className="flex items-center gap-1.5">
            <Calendar className="h-4 w-4" />
            {t.profile.memberSince} {joinDate}
          </span>
          <span className="flex items-center gap-1.5">
            <FileText className="h-4 w-4" />
            {profile.thread_count} {t.profile.threads.toLowerCase()}
          </span>
          <span className="flex items-center gap-1.5">
            <MessageSquare className="h-4 w-4" />
            {profile.comment_count} {t.profile.comments.toLowerCase()}
          </span>
          <span className="flex items-center gap-1.5">
            <Star className="h-4 w-4" />
            {profile.reputation} {t.profile.reputation.toLowerCase()}
          </span>
        </div>
      </div>
    </div>
  )
}