import React from 'react';
import Link from "next/link";
import Image from "next/image";
import type { AuthorProfile } from "@/lib/types";

export function AuthorCard({ author }: { author: AuthorProfile }) {
    return (
        <aside className="rounded-xl border border-gray-200 bg-white p-6 my-8 flex gap-6 items-start shadow-sm">
            {author.image ? (
                <div className="relative w-16 h-16 flex-shrink-0">
                    <Image
                        src={author.image}
                        alt={author.name}
                        fill
                        className="rounded-full object-cover border-2 border-white shadow-md"
                    />
                </div>
            ) : (
                <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xl flex-shrink-0">
                    {author.name.charAt(0)}
                </div>
            )}

            <div className="min-w-0">
                <div className="font-bold text-lg text-gray-900">
                    <Link href={`/authors/${author.slug}`} className="hover:text-blue-600 transition-colors">
                        {author.name}
                    </Link>
                </div>
                <div className="text-sm font-medium text-blue-600 mb-2">{author.role}</div>
                <p className="text-sm text-gray-600 leading-relaxed mb-3">{author.bio}</p>

                {!!author.sameAs?.length && (
                    <div className="flex flex-wrap gap-3">
                        {author.sameAs.map((url) => {
                            let label = "Website";
                            if (url.includes('linkedin')) label = "LinkedIn";
                            if (url.includes('github')) label = "GitHub";
                            if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";

                            return (
                                <a key={url} href={url} target="_blank" rel="noreferrer" className="text-xs font-semibold text-gray-500 hover:text-gray-900 uppercase tracking-wide">
                                    {label}
                                </a>
                            );
                        })}
                    </div>
                )}
            </div>
        </aside>
    );
}
