import React from 'react';
import type { Note } from '../types';

type Props = {
  item: Note;
  isSelected: boolean;
  onSelect: () => void;
  index: number;
};

export function NoteListItem({ item, isSelected, onSelect, index }: Props) {
  // Get preview text (first 100 characters)
  const previewText = item.text.substring(0, 100) + (item.text.length > 100 ? '...' : '');

  return (
    <div
      id={`sidebar-note-item-${index}`}
      data-selected={isSelected ? 'true' : 'false'}
      onClick={onSelect}
      style={{
        padding: '12px 16px',
        cursor: 'pointer',
        backgroundColor: isSelected ? '#f2efeb' : 'transparent',
        borderLeft: isSelected ? '3px solid #bc915c' : '3px solid transparent',
        transition: 'all 0.2s ease',
      }}
      onMouseEnter={(e) => {
        if (!isSelected) {
          e.currentTarget.style.backgroundColor = '#f9f7f4';
        }
      }}
      onMouseLeave={(e) => {
        if (!isSelected) {
          e.currentTarget.style.backgroundColor = 'transparent';
        }
      }}
    >
      <div style={{
        fontSize: '13px',
        fontWeight: isSelected ? 600 : 400,
        color: isSelected ? '#8b7355' : '#2d251f',
        lineHeight: '1.5',
        overflow: 'hidden',
        display: '-webkit-box',
        WebkitLineClamp: 3,
        WebkitBoxOrient: 'vertical',
        textOverflow: 'ellipsis',
      }}>
        {previewText}
      </div>
    </div>
  );
}