'use client'

import { useState } from 'react'
import { Note } from '@/lib/types'
import { NoteCard } from './note-card'
import { ChevronDown, ChevronUp } from 'lucide-react'

interface FavoritesSectionProps {
  pinnedNotes: Note[]
  onEdit?: (note: Note, readOnly?: boolean) => void
}

export function FavoritesSection({ pinnedNotes, onEdit }: FavoritesSectionProps) {
  const [isCollapsed, setIsCollapsed] = useState(false)

  // Don't show section if no pinned notes
  if (pinnedNotes.length === 0) {
    return null
  }

  return (
    <section data-testid="favorites-section" className="mb-8">
      {/* Collapsible Header */}
      <button
        onClick={() => setIsCollapsed(!isCollapsed)}
        className="w-full flex items-center justify-between gap-2 mb-4 px-2 py-2 hover:bg-accent rounded-lg transition-colors min-h-[44px]"
        aria-expanded={!isCollapsed}
      >
        <div className="flex items-center gap-2">
          <span className="text-2xl">📌</span>
          <h2 className="text-lg font-semibold text-foreground">
            Pinned Notes
            <span className="text-sm font-medium text-muted-foreground ml-2">
              ({pinnedNotes.length})
            </span>
          </h2>
        </div>
        {isCollapsed ? (
          <ChevronDown className="w-5 h-5 text-muted-foreground" />
        ) : (
          <ChevronUp className="w-5 h-5 text-muted-foreground" />
        )}
      </button>

      {/* Collapsible Content */}
      {!isCollapsed && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {pinnedNotes.map((note) => (
            <NoteCard
              key={note.id}
              note={note}
              onEdit={onEdit}
            />
          ))}
        </div>
      )}
    </section>
  )
}