import { useState } from "react";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { IoLocationOutline, IoCalendarOutline } from "react-icons/io5";

interface ProfileInfoProps {
  username?: string;
  city?: string;
  state?: string;
  createdAt?: string;
  t: (key: string) => string;
}

export const ProfileInfo = ({
  username,
  city,
  state,
  createdAt,
  t,
}: ProfileInfoProps) => {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <div>
      <div className="flex items-center gap-2 mb-1 max-sm:justify-center">
        <h2 className="text-[20px] font-semibold text-primary500 dark:text-primary400">
          {username || "Username"}
        </h2>
        <span
          className="relative"
          onMouseEnter={() => setShowTooltip(true)}
          onMouseLeave={() => setShowTooltip(false)}
        >
          <AiOutlineInfoCircle className="text-gray-400 mt-1" />
          {showTooltip && (
            <div className="absolute z-10 w-80 p-4 text-sm text-gray-600 bg-white border border-gray-200 rounded-xl shadow-xl top-[25px] left-1/2 -translate-x-1/2 dark:text-neutrals300 dark:bg-background dark:border-darkborder">
              <div className="absolute w-3 h-3 bg-white border-l border-t border-gray-200 rotate-45 -top-[7px] left-1/2 -translate-x-1/2 dark:bg-background dark:border-darkborder"></div>
              {t("dashboard.dashboard_Desc")}
            </div>
          )}
        </span>
      </div>
      <p className="text-sm text-neutrals800 flex items-center gap-1 mb-2 dark:text-neutrals300 max-sm:justify-center">
        <IoLocationOutline className="text-[18px]" />
        <span className="max-lg:text-[13px]">
          {city && state ? `${city}, ${state}` : state || t("location_not_specified")}
        </span>
      </p>
      <p className="text-sm text-neutrals800 flex items-center gap-1 mb-2 dark:text-neutrals300 max-sm:justify-center">
        <IoCalendarOutline className="text-[18px]" />
        <span className="max-lg:text-[13px]">
          {t("dashboard.member_since")}{" "}
          {createdAt
            ? new Date(createdAt).toLocaleDateString("en-US", {
                weekday: "short",
                day: "numeric",
                month: "long",
                year: "numeric",
              })
            : t("dashboard.date_not_available")}
        </span>
      </p>
      <span className="flex items-center justify-center gap-1 w-fit mt-1 text-xs text-kzgreen600 bg-kzgreen50 px-2 py-1 rounded-md max-sm:justify-center max-sm:m-auto max-sm:mt-3">
        <svg
          width="20"
          height="18"
          viewBox="0 0 20 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M19.1673 9L17.134 6.675L17.4173 3.6L14.409 2.91667L12.834 0.25L10.0007 1.46667L7.16732 0.25L5.59232 2.90833L2.58398 3.58333L2.86732 6.66667L0.833984 9L2.86732 11.325L2.58398 14.4083L5.59232 15.0917L7.16732 17.75L10.0007 16.525L12.834 17.7417L14.409 15.0833L17.4173 14.4L17.134 11.325L19.1673 9ZM8.40898 12.9333L5.24232 9.75833L6.47565 8.525L8.40898 10.4667L13.284 5.575L14.5173 6.80833L8.40898 12.9333Z"
            fill="#059669"
          />
        </svg>
        {t("dashboard.verified")}
      </span>
    </div>
  );
};