import { memo } from "react";
import { Badge } from "@/components/ui/badge";

interface InfluencesSectionProps {
  authorName: string;
  influences: string[];
}
export const InfluencesSection = memo(function InfluencesSection({
  authorName,
  influences,
}: InfluencesSectionProps) {
  if (!influences.length) return null;
  return (
    <section
      className="py-2 space-y-4"
      aria-labelledby="author-influences-heading"
    >
      <h3 id="author-influences-heading" className="text-lg font-medium">
        Literary Influences
      </h3>
      <p className="text-muted-foreground max-w-3xl">
        The authors and thinkers who shaped {authorName}'s writing style,
        philosophy, and literary approach.
      </p>
      <div className="flex flex-wrap gap-2 mt-2">
        {influences.map((inf) => (
          <Badge key={inf} variant="outline" className="px-3 py-1 text-sm">
            {inf}
          </Badge>
        ))}
      </div>
    </section>
  );
});
