"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle, FaStar } from "react-icons/fa";
import TabBar from "../components/TabBar";

const ModeratorProfilePage = () => {
  const router = useRouter();

  const fullName = "Иванов Александр Сергеевич";
  const birthDate = "12.03.1990";
  const rating = 4.8;

  return (
    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
      <div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
        {/* Header с кнопкой назад и заголовком по центру */}
        <header className="flex items-center mb-4">
          <button
            type="button"
            onClick={() => router.back()}
            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
          >
            ←
          </button>
          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
            Профиль
          </h1>
          <span className="w-8" />
        </header>

        {/* Карточка профиля */}
        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
          {/* Аватар */}
          <FaUserCircle className="text-[#72B8E2] w-20 h-20" />

          {/* ФИО и рейтинг */}
          <div className="text-center space-y-1">
            {/* <p className="font-montserrat font-extrabold text-[16px] text-black">
              ФИО
            </p> */}
            <p className="font-montserrat font-bold text-[20px] text-black">
              {fullName}
            </p>

            {/* Рейтинг + звезды */}
            <div className="mt-2 flex items-center justify-center gap-2">
              <span className="font-montserrat font-semibold text-[14px] text-black">
                Рейтинг: {rating.toFixed(1)}
              </span>
              <div className="flex gap-1">
                {[1, 2, 3, 4, 5].map((star) => (
                  <FaStar
                    key={star}
                    size={18}
                    className={
                      star <= Math.round(rating)
                        ? "text-[#F6E168] fill-[#F6E168]"
                        : "text-[#F6E168] fill-[#F6E168]/30"
                    }
                  />
                ))}
              </div>
            </div>
          </div>

          {/* Контакты и день рождения */}
          <div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
            <p className="font-montserrat text-[12px]">
              Дата рождения: {birthDate}
            </p>
            <p className="font-montserrat text-[12px]">
              Почта: example@mail.com
            </p>
            <p className="font-montserrat text-[12px]">
              Телефон: +7 (900) 000-00-00
            </p>
          </div>

          {/* Кнопки */}
          <div className="w-full flex flex-col gap-2 mt-2">
            <button
              type="button"
              onClick={() => router.push("/valounterProfileSettings")}
              className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
            >
              <span className="font-montserrat font-extrabold text-[14px] text-white">
                Редактировать профиль
              </span>
            </button>
            <button
              type="button"
              className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
            >
              <span className="font-montserrat font-extrabold text-[14px] text-white">
                Выйти из аккаунта
              </span>
            </button>
          </div>
        </main>

        <TabBar />
      </div>
    </div>
  );
};

export default ModeratorProfilePage;