import Link from 'next/link';

interface AuthorBoxProps {
  author: string;
  authorBio?: string | null;
  authorProfileUrl?: string | null;
}

export function AuthorBox({ author, authorBio, authorProfileUrl }: AuthorBoxProps) {
  // Don't render if no bio is available
  if (!authorBio) {
    return null;
  }

  // Create author page URL (URL-encoded for Japanese characters)
  const authorPageUrl = `/author/${encodeURIComponent(author)}`;

  return (
    <Link href={authorPageUrl}>
      <div className="bg-[#202026] border-l-4 border-[#E60023] rounded-xl p-6 my-8 cursor-pointer hover:bg-[#2A2A33] transition-colors shadow-lg">
        <h3 className="text-lg font-semibold text-white mb-3">執筆者について</h3>
        <div className="space-y-2">
          <p className="text-xl font-semibold text-[#E60023] hover:text-[#FF2A3D] transition-colors">
            {author}
          </p>
          <p className="text-[#B8B8C0] leading-relaxed">{authorBio}</p>
          <p className="text-sm text-[#B8B8C0] mt-3">
            クリックして {author} の他の記事を見る →
          </p>
        </div>
      </div>
    </Link>
  );
}
