"use client";

import Link from "next/link";
import { Pin, FileText, ArrowRight, Plus } from "lucide-react";

interface PinnedNote {
  id: string;
  title: string;
  preview: string;
}

interface PinnedNotesProps {
  notes: PinnedNote[];
}

export function PinnedNotes({ notes }: PinnedNotesProps) {
  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-amber-500/20 hover:shadow-[0_0_30px_-10px_rgba(245,158,11,0.1)]">
      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-600/10 ring-1 ring-amber-500/10">
            <Pin className="h-4 w-4 text-amber-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Notizen</h2>
            <p className="text-[10px] text-muted-foreground">
              {notes.length > 0 ? `${notes.length} angeheftet` : "Keine angeheftet"}
            </p>
          </div>
        </div>
        <Link
          href="/notes"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-amber-500 transition-colors"
        >
          Alle <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        {notes.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500/10 to-orange-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-amber-500/5">
              <FileText className="h-5 w-5 text-amber-400" />
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-1">Keine angehefteten Notizen</p>
            <Link
              href="/notes"
              className="inline-flex items-center gap-1 text-xs text-amber-500 hover:text-amber-400 transition-colors"
            >
              <Plus className="h-3 w-3" />
              Notiz anheften
            </Link>
          </div>
        ) : (
          <div className="py-1">
            {notes.slice(0, 4).map((note) => (
              <Link
                key={note.id}
                href={`/notes/${note.id}`}
                className="flex items-center gap-3 px-5 py-2.5 hover:bg-accent/30 transition-all duration-150 group/note"
              >
                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0 ring-1 ring-border/30 group-hover/note:ring-amber-500/20 transition-all">
                  <FileText className="h-3.5 w-3.5 text-muted-foreground/70" />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-[13px] font-medium truncate">{note.title}</p>
                  {note.preview && (
                    <p className="text-[11px] text-muted-foreground truncate mt-0.5">
                      {note.preview}
                    </p>
                  )}
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}