"use client";

import "react-quill-new/dist/quill.snow.css";

interface HtmlParserProps {
  html: string;
  className?: string;
}

export function HtmlParser({ html, className = "" }: HtmlParserProps) {
  try {
    return (
      <div className={`content-preview ${className}`}>
        <div
          className="ql-editor prose prose-sm sm:prose lg:prose-lg max-w-none overflow-hidden"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        <style jsx global>{`
          .content-preview .ql-editor {
            padding: 0;
            background-color: transparent;
            border: none;
            border-radius: 0;
            min-height: auto;
          }
          .content-preview .ql-editor h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #111827;
          }
          .content-preview .ql-editor h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #111827;
          }
          .content-preview .ql-editor h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #111827;
          }
          .content-preview .ql-editor p {
            margin-bottom: 1rem;
            color: #374151;
            line-height: 1.75;
          }
          .content-preview .ql-editor ul,
          .content-preview .ql-editor ol {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
            color: #374151;
          }
          .content-preview .ql-editor li {
            margin-bottom: 0.25rem;
            line-height: 1.75;
          }
          .content-preview .ql-editor blockquote {
            border-left: 4px solid #3b82f6;
            padding-left: 1rem;
            margin: 1rem 0;
            color: #6b7280;
            background-color: rgba(59, 130, 246, 0.05);
          }
          .content-preview .ql-editor a {
            color: #2563eb;
            text-decoration: underline;
          }
          .content-preview .ql-editor strong,
          .content-preview .ql-editor b {
            font-weight: 700;
            color: #111827;
          }
          .content-preview .ql-editor em,
          .content-preview .ql-editor i {
            font-style: italic;
            color: #374151;
          }
          .content-preview .ql-editor img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            margin: 1rem 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          }
          .content-preview .ql-editor pre {
            background-color: #1f2937;
            color: #f9fafb;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1rem 0;
          }
          .content-preview .ql-editor code {
            background-color: #f3f4f6;
            color: #374151;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          }
          .content-preview .ql-editor table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
          }
          .content-preview .ql-editor th,
          .content-preview .ql-editor td {
            border: 1px solid #d1d5db;
            padding: 0.5rem;
          }
          .content-preview .ql-editor th {
            background-color: #f9fafb;
            font-weight: 600;
            text-align: left;
          }
        `}</style>
      </div>
    );
  } catch (error) {
    console.error('Error parsing HTML:', error);
    return (
      <div className={`text-red-600 ${className}`}>
        Error loading content. Please try again later.
      </div>
    );
  }
}