"use client";

import Image from "next/image";
import { SOCIAL_LINKS } from "@/components/common/constant";

interface SocialLink {
  platform: string;
  url: string;
  icon?: string;
}

interface AuthorBioProps {
  name: string;
  avatar: string;
  bio: string;
  socialLinks: SocialLink[];
}

const PLATFORM_SVG: Record<string, string> = {
  facebook: "/assets/images/facebook.svg",
  twitter:  "/assets/images/twitter.svg",
  instagram:        "/assets/images/instagram.svg",
  linkedin: "/assets/images/linkedin.svg",
};

const PLATFORM_SVG_FALLBACK: Record<string, string> = Object.fromEntries(
  SOCIAL_LINKS.map((l) => [l.platform.toLowerCase(), l.icon]),
);

const JOIN_LINKS = [
  { platform: "Facebook", url: "https://www.facebook.com/myseatime" },
  { platform: "LinkedIn", url: "https://www.linkedin.com/company/myseatime" },
  { platform: "Twitter",  url: "https://www.twitter.com/myseatime" },
  // { platform: "Instagram", url: "https://www.instagram.com/myseatime/" },
  { platform: "Pinterest", url: "https://www.pinterest.com/myseatime/" },
];

const SocialCircle: React.FC<{ link: SocialLink }> = ({ link }) => {
  const key = link.platform.toLowerCase();
  const src = PLATFORM_SVG[key] ?? link.icon ?? PLATFORM_SVG_FALLBACK[key];
  if (!src) return null;
  return (
    <a
      href={link.url}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={link.platform}
      title={link.platform}
      className="w-7 h-7 rounded-full border border-[#d1d5db] flex items-center justify-center text-[#6b7280] hover:border-[#60a5fa] transition-colors shrink-0"
    >
      <Image
        src={src}
        alt={link.platform}
        width={14}
        height={14}
        className="w-3.5 h-3.5 object-contain opacity-70"
      />
    </a>
  );
};

const AuthorBio: React.FC<AuthorBioProps> = ({ name, avatar, bio, socialLinks }) => {
  return (
    <div className="bg-white border border-[#e5e7eb] rounded-xl p-5">
      {/* Author photo */}
      {avatar && (
        <div className="flex justify-center mb-4">
          <div className="relative w-24 h-24 rounded-full overflow-hidden border border-[#e5e7eb]">
            <Image src={avatar} alt={name} fill className="object-cover" />
          </div>
        </div>
      )}

      {/* Name */}
      <h3 className="text-[20px] font-bold text-[#111827] mb-1 text-center">
        About {name}
      </h3>

      {/* Author social links */}
      {socialLinks.length > 0 && (
        <div className="flex justify-center gap-2 mb-3 flex-wrap">
          {socialLinks.map((link, i) => (
            <SocialCircle key={`${link.platform}-${i}`} link={link} />
          ))}
        </div>
      )}

      {/* Bio */}
      {bio && (
        <p className="text-sm text-[#4b5563] leading-[1.6] mb-5 whitespace-pre-wrap">{bio}</p>
      )}

      {/* Join our platform */}
      <p className="text-[11px] font-semibold text-[#6b7280] uppercase tracking-[.05em] mb-2">
        Join our platform:
      </p>
      <div className="flex gap-2 flex-wrap">
        {JOIN_LINKS.map((link, i) => (
          <SocialCircle key={`join-${i}`} link={link} />
        ))}
      </div>
    </div>
  );
};

export default AuthorBio;