import { type Note } from "@/types.ts";

export function NoteItem(
  { id, createdAt, content, userId, userDisplayName, userUsername }: Note,
) {
  return (
    <div class="my-4" key={id}>
      <span>
        <a href={`/note/${id}`} class="text-blue-500">Note {id}</a>
        {" created by "}
        {!userId
          ? "Anonymous"
          : <a href={`/user/${userId}`}>{userDisplayName || userUsername}</a>}
        {` at ${createdAt.toLocaleString()}`}
      </span>
      <blockquote class="mt-2 pl-4 border-l(solid 4)">
        <pre>{content}</pre>
      </blockquote>
    </div>
  );
}