import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import CountUp from 'react-countup';
import ReactMarkdown from 'react-markdown'; // <-- IMPORTANTE: Importamos la librería

interface WelcomeProps {
  title?: string;
  preTitle?: string;
  text?: string;
  darkColor?: string;
  lightColor?: string;
  facts?: any[];
}

const Welcome: React.FC<WelcomeProps> = (props) => {
  const { title = '', text = '', preTitle = '', darkColor = '', lightColor = '', facts } = props;
  return (
    <section className="wrapper bg-light" id="welcome">
      <div className="container py-7 py-md-14">
        <div className="row  gx-7  gy-7 gy-md-12">
          <div className="col-12 col-lg-10 offset-lg-1">
            <p className="mb-2 base-pretitle tw-text-center" style={{ color: darkColor }}>
              {preTitle}
            </p>
            <h1 className="base-title tw-uppercase tw-text-center" style={{ color: darkColor }}>
              {title}
            </h1>
            
            {/* INICIO DE LO NUEVO: Reemplazamos el <p> simple por ReactMarkdown */}
            <div className="mt-5 base-text tw-text-center !tw-text-secondary-dark welcome-markdown">
              <ReactMarkdown>
                {text}
              </ReactMarkdown>
            </div>
            {/* FIN DE LO NUEVO */}

          </div>
          {/*-- /column -*/}
          {(facts && Array?.isArray(facts) && facts?.length && (
            <div className="col-lg-12 tw-grid tw-grid-cols-2 min-[1200px]:tw-grid-cols-4 tw-gap-3 md:tw-gap-6">
              {facts?.map((fact, key) => {
                return (
                  <div
                    key={key}
                    className="tw-h-full tw-border tw-border-light-gray tw-rounded-xl tw-p-2  sm:tw-p-4 tw-flex tw-items-center tw-gap-4"
                  >
                    <div className="tw-w-8 tw-min-w-8  tw-h-8 md:tw-w-16 md:tw-h-16 md:tw-min-w-16  tw-place-content-center tw-relative ">
                      <div
                        className="tw-rounded-full tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-1 tw-opacity-30"
                        style={{ backgroundColor: lightColor }}
                      />
                      {(fact?.icon && fact?.icon?.url && (
                        <Image
                          src={fact?.icon?.url}
                          alt="icon welcome"
                          height={fact?.icon?.height || 20}
                          width={fact?.icon?.width || 20}
                          className="mx-auto tw-max-w-[50%] tw-z-10 tw-relative "
                        />
                      )) ||
                        ''}
                    </div>
                    <div>
                      {' '}
                      {fact?.amount && <CountUp
                        end={fact?.amount}
                        prefix={fact?.prefix || ''}
                        className="tw-text-main-dark  tw-font-ibm tw-text-3xl md:tw-text-5xl tw-font-light"
                      /> || ""}
                      <p className="tw-text-sm md:tw-text-base tw-text-secondary-dark tw-font-inter tw-font-normal">
                        {fact?.title}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          )) ||
            ''}

          {/*-- /column -*/}
        </div>
        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}

      {/* ESTILOS GLOBALES: Para asegurarnos que las etiquetas generadas por el Markdown tengan estilo */}
      <style jsx global>{`
        .welcome-markdown p {
          margin-bottom: 1rem;
        }
        .welcome-markdown p:last-child {
          margin-bottom: 0;
        }
        .welcome-markdown strong {
          font-weight: 700;
        }
        .welcome-markdown ul {
          list-style-type: disc;
          margin-left: 2rem;
          margin-bottom: 1rem;
          text-align: left; /* Generalmente las listas se ven mejor alineadas a la izquierda */
        }
        .welcome-markdown ol {
          list-style-type: decimal;
          margin-left: 2rem;
          margin-bottom: 1rem;
          text-align: left;
        }
        .welcome-markdown a {
          color: ${darkColor || 'inherit'};
          text-decoration: underline;
        }
      `}</style>
    </section>
  );
};

export default Welcome;