import { Badge } from '@/components/ui/badge';

interface ArticleHeaderProps {
  title: string;
  author: string;
  publicationDate: Date;
  readingTime: number | null;
  category: string | null;
}

export function ArticleHeader({
  title,
  author,
  publicationDate,
  readingTime,
  category,
}: ArticleHeaderProps) {
  // Format date to Japanese format: 2026年2月14日
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}年${month}月${day}日`;
  };

  return (
    <div className="mb-8">
      {category && (
        <Badge className="mb-4 bg-[#E60023] hover:bg-[#FF2A3D] text-white border-transparent">
          {category}
        </Badge>
      )}
      <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-4 text-white leading-tight">
        {title}
      </h1>
      <div className="flex flex-wrap items-center gap-4 text-sm text-[#B8B8C0]">
        <span>著者: {author}</span>
        <span>•</span>
        <span>{formatDate(publicationDate)}</span>
        {readingTime && (
          <>
            <span>•</span>
            <span>読了時間: {readingTime}分</span>
          </>
        )}
      </div>
    </div>
  );
}
