'use client'

import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface RelatedNote {
  id: string
  title: string
  type: string
  tags: string[]
  score: number
  reason: string
}

export function RelatedNotes({ notes }: { notes: RelatedNote[] }) {
  if (notes.length === 0) return null

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">También podrías necesitar</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {notes.map((note) => (
            <Link key={note.id} href={`/notes/${note.id}`}>
              <div className="p-3 rounded-lg border hover:bg-gray-50 transition-colors">
                <div className="flex items-center justify-between mb-1">
                  <span className="font-medium text-sm">{note.title}</span>
                  <Badge variant="outline" className="text-xs">{note.type}</Badge>
                </div>
                <p className="text-xs text-gray-500 line-clamp-1">{note.reason}</p>
                {note.tags.length > 0 && (
                  <div className="flex gap-1 mt-1">
                    {note.tags.slice(0, 3).map((tag) => (
                      <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                )}
              </div>
            </Link>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}