interface AuthorProfileProps {
  author: string;
  authorBio?: string | null;
  articleCount: number;
}

export function AuthorProfile({ author, authorBio, articleCount }: AuthorProfileProps) {
  return (
    <div className="bg-[#202026] border-l-4 border-[#E60023] rounded-lg p-8 mb-8 shadow-lg hover:border-[#E60023]/80 transition-all duration-200" suppressHydrationWarning>
      <div className="space-y-4" suppressHydrationWarning>
        <h2 className="text-lg font-semibold text-white mb-4">執筆者について</h2>
        
        <div>
          <h1 className="text-2xl md:text-3xl font-semibold text-[#E60023] mb-2">{author}</h1>
          <p className="text-[#B8B8C0] text-sm mb-4">
            {articleCount} article{articleCount !== 1 ? 's' : ''} written
          </p>
        </div>
        
        {authorBio && (
          <p className="text-[#B8B8C0] leading-relaxed">{authorBio}</p>
        )}
        
        <p className="text-sm text-[#B8B8C0] mt-4">
          クリックして {author} の他の記事を見る →
        </p>
      </div>
    </div>
  );
}
