collabrix/frontend/src/components/Snippets/SnippetViewer.tsx

import React from 'react';
import { useAuth } from '../../contexts/AuthContext';
import type { Snippet } from '../../types';
import CodeBlock from '../common/CodeBlock';

interface SnippetViewerProps {
  snippet: Snippet;
  onEdit: () => void;
  onDelete: () => void;
}

const SnippetViewer: React.FC<SnippetViewerProps> = ({ snippet, onEdit, onDelete }) => {
  const { user } = useAuth();
  const isOwner = user?.id === snippet.owner_id;

  const copyToClipboard = () => {
    navigator.clipboard.writeText(snippet.content);
    alert('Copied to clipboard!');
  };

  return (
    <div className="h-full flex flex-col bg-white dark:bg-gray-800">
      <div className="p-3 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
              {snippet.title}
            </h2>
            <div className="mt-1.5 flex items-center space-x-3 text-xs text-gray-600 dark:text-gray-400">
              <span>Language: {snippet.language}</span>
              <span>Visibility: {snippet.visibility}</span>
              <span>By: {snippet.owner_username}</span>
            </div>
            {snippet.tags && (
              <div className="mt-1.5 flex flex-wrap gap-1.5">
                {snippet.tags.split(',').map((tag, i) => (
                  <span
                    key={i}
                    className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded"
                  >
                    {tag.trim()}
                  </span>
                ))}
              </div>
            )}
          </div>

          {isOwner && (
            <div className="flex space-x-1.5">
              <button
                onClick={onEdit}
                className="px-2.5 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs"
              >
                Edit
              </button>
              <button
                onClick={onDelete}
                className="px-2.5 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-xs"
              >
                Delete
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-3">
        <div className="relative">
          <button
            onClick={copyToClipboard}
            className="absolute top-1.5 right-1.5 px-2.5 py-1 bg-gray-700 hover:bg-gray-600 text-white text-xs rounded"
          >
            Copy
          </button>

          <CodeBlock
            code={snippet.content}
            language={snippet.language}
            className="p-3 bg-gray-900 dark:bg-gray-950 text-gray-100 text-sm rounded overflow-x-auto"
          />
        </div>

        <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
          <div>Created: {new Date(snippet.created_at).toLocaleString()}</div>
          <div>Updated: {new Date(snippet.updated_at).toLocaleString()}</div>
        </div>
      </div>
    </div>
  );
};

export default SnippetViewer;