// src/app/components/ProfileCard.tsx
'use client'

import React from 'react'
import Image from 'next/image'

export interface ProfileCardProps {
  avatar: string
  full_name: string
  email: string
  bio?: string
  last_login: string
  date_joined: string
  totalGroups: number      // ← добавили
  totalLinks: number       // ← добавили
}

export const ProfileCard: React.FC<ProfileCardProps> = ({
  avatar,
  full_name,
  email,
  bio,
  last_login,
  date_joined,
  totalGroups,
  totalLinks,
}) => {
  return (
    <div className="bg-white shadow rounded mx-auto mt-8" style={{ maxWidth: 600 }}>
      <div
        className="rounded-top"
        style={{
          backgroundImage: `url('/assets/img/iceland.jpg')`,
          height: 150,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      />
      <div className="text-center position-relative" style={{ marginTop: -75 }}>
        <Image
          className="rounded-circle border border-white"
          src={avatar}
          alt="Avatar"
          width={150}
          height={150}
        />
      </div>
      <div className="px-4 pb-4 text-center">
        <h3 className="mt-3">{full_name}</h3>
        <p className="text-muted mb-2">{email}</p>
        <p className="mb-3">{bio ?? 'Описание профиля отсутствует.'}</p>

        <div className="d-flex justify-content-around">
          <div>
            <p className="mb-0 text-uppercase small">Всего групп</p>
            <p className="fw-bold">{totalGroups}</p>
          </div>
          <div>
            <p className="mb-0 text-uppercase small">Всего ссылок</p>
            <p className="fw-bold">{totalLinks}</p>
          </div>
        </div>
      </div>
    </div>
  )
}
