/**
 * AuthorCard - Author information display
 *
 * Shows author avatar and name at the bottom of blog posts.
 */

import { BLOG_COLORS } from "@/lib/blog.config";

export interface AuthorCardProps {
  /** Author name */
  author: string;
  /** Written by label */
  writtenByLabel: string;
}

export default function AuthorCard({
  author,
  writtenByLabel,
}: AuthorCardProps) {
  return (
    <div className="flex items-center gap-4">
      <div
        className="w-14 h-14 flex items-center justify-center text-xl font-bold text-white"
        style={{ backgroundColor: BLOG_COLORS.primary }}
      >
        {author?.charAt(0).toUpperCase() || "M"}
      </div>
      <div>
        <p
          className="text-xs uppercase tracking-wider mb-1"
          style={{ color: BLOG_COLORS.body }}
        >
          {writtenByLabel}
        </p>
        <p className="text-lg font-bold" style={{ color: BLOG_COLORS.heading }}>
          {author}
        </p>
      </div>
    </div>
  );
}