import type { ClientView } from '@/lib/client-view';

interface DocumentsSectionProps {
  documents: ClientView['documents'];
}

export function DocumentsSection({ documents }: DocumentsSectionProps) {
  if (documents.length === 0) {
    return (
      <p className="text-sm text-muted-foreground italic">
        Nessun documento ancora condiviso.
      </p>
    );
  }

  return (
    <div className="rounded-xl border border-border-light bg-card shadow-card p-3 space-y-2">
      {documents.map((doc) => (
        <a
          key={doc.id}
          href={doc.url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center justify-between gap-3 rounded-lg border border-border-light px-3 py-3 group hover:border-border transition-colors"
        >
          <span className="text-xs font-medium text-foreground truncate">
            {doc.label}
          </span>

          {/* Icona external link */}
          <svg
            className="w-4 h-4 text-muted-foreground group-hover:text-primary shrink-0 transition-colors"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
            />
          </svg>
        </a>
      ))}
    </div>
  );
}