import { navigateTo } from "@/app/browser-location";
import { routePaths } from "@/app/route-paths";
import type { CharacterListItem as CharacterListItemData } from "@/features/characters/model/types";

export function CharacterListItem({ character }: { readonly character: CharacterListItemData }) {
  const detailPath = routePaths.aiCharacterDetail(String(character.id));
  const description = character.description.length > 0 ? character.description : "설명이 없습니다.";

  return (
    <a
      aria-label={`${character.name} 선택`}
      className="block rounded-lg border border-border bg-card p-4 text-foreground hover:bg-accent focus-visible:bg-accent"
      href={detailPath}
      onClick={(event) => {
        event.preventDefault();
        navigateTo(detailPath);
      }}
    >
      <span className="flex items-start gap-3">
        {character.imageUrl === null ? (
          <span aria-hidden="true" className="grid size-12 shrink-0 place-items-center rounded-md bg-muted font-semibold text-muted-foreground">
            {character.name.slice(0, 1)}
          </span>
        ) : (
          <img alt="" className="size-12 shrink-0 rounded-md object-cover" height="48" loading="lazy" src={character.imageUrl} width="48" />
        )}
        <span className="min-w-0 flex-1">
          <span className="block break-keep break-words font-semibold">{character.name}</span>
          <span className="mt-1 line-clamp-2 block break-keep break-words text-sm text-muted-foreground">{description}</span>
          <span className="mt-2 block break-keep break-words text-xs font-semibold text-info">ID {character.id} · {character.region}</span>
          <span className="mt-1 block break-keep break-words text-xs text-muted-foreground">{character.tags.join(", ")}</span>
        </span>
      </span>
    </a>
  );
}