import type { BlogPostAuthor } from "@/data/blog-post-detail";
import DataLink from "@/components/common/DataLink";
import Image from "next/image";

export default function BlogPostAuthorBio({ author }: { author: BlogPostAuthor }) {
  return (
    <div className="auther-bio">
      <div className="author-image">
        <Image
          src={author.image.src}
          alt={author.image.alt}
          width={author.image.width}
          height={author.image.height}
        />
      </div>
      <div className="author-info">
        <h1 className="name">{author.name}</h1>
        <p>{author.bio}</p>
        <ul className="social-link2">
          {author.socials.map((social) => (
            <li key={social.id}>
              <DataLink href={social.href} title="">
                <Image
                  src={social.icon.src}
                  alt={social.icon.alt}
                  width={social.icon.width}
                  height={social.icon.height}
                />
              </DataLink>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}