import { Writing } from "@/lib/types";
import { FileText } from "lucide-react";

const kindLabel: Record<Writing["kind"], string> = {
  essay: "Essay",
  script: "Script",
  other: "Other",
  novel: "Novel",
};

const WritingsList = ({ writings }: { writings: Writing[] }) => {
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      {writings.map((w) => (
        <a
          key={w.url}
          href={w.url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-3 px-4 py-3 rounded-lg text-white hover:bg-white/10 transition-colors group"
        >
          <FileText className="w-5 h-5 text-yellow-400 shrink-0" />
          <span className="group-hover:text-yellow-400 transition-colors">
            {w.title}
          </span>
          <span className="text-white/40 text-sm ml-auto">
            {kindLabel[w.kind]}
          </span>
        </a>
      ))}
    </div>
  );
};

export default WritingsList;