import type { NoteListProps } from '../interfaces/note-list'

const EMPTY_MESSAGE = 'Aucune note pour le moment.\nTouchez + pour en créer une.'

function NoteList({ notes, onSelect }: NoteListProps) {
  if (notes.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
        <p className="whitespace-pre-line text-gray-500">{EMPTY_MESSAGE}</p>
      </div>
    )
  }

  return (
    <ul className="flex flex-col divide-y divide-gray-100 overflow-hidden rounded-2xl bg-white shadow-sm">
      {notes.map((note) => (
        <li key={note.id}>
          <button
            type="button"
            onClick={() => onSelect(note.id)}
            aria-label={note.title ? `Ouvrir la note ${note.title}` : 'Ouvrir la note Sans titre'}
            className="flex w-full min-h-14 items-center justify-between gap-3 px-4 py-5 text-left text-base active:bg-gray-50"
          >
            <span className={note.title ? 'text-gray-800' : 'italic text-gray-400'}>
              {note.title || 'Sans titre'}
            </span>
            <span aria-hidden="true" className="text-gray-400">
              ›
            </span>
          </button>
        </li>
      ))}
    </ul>
  )
}

export default NoteList