import React from "react";

interface TLDRProps {
  children?: React.ReactNode;
  content?: string;
  className?: string;
}

export const TLDR: React.FC<TLDRProps> = ({
  children,
  content,
  className = "",
}) => {
  return (
    <div
      className={`my-8 p-6 bg-slate-900 border-l-4 border-indigo-500 rounded-r-lg shadow-xl ${className}`}
    >
      <div className="flex items-center gap-3 mb-4">
        <div className="bg-indigo-500 text-white p-1 rounded">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07l14.14-14.14" />
          </svg>
        </div>
        <h3 className="text-white font-bold text-lg uppercase tracking-wider">
          TL;DR
        </h3>
      </div>
      <div className="text-slate-300 font-serif text-lg leading-relaxed italic">
        {children || content}
      </div>
    </div>
  );
};