import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { MousePointer2, Keyboard, AppWindow, KeyRound } from 'lucide-react';

const trilhas = [
  {
    id: 'mouse',
    Icone: MousePointer2,
    titulo: 'Usar o Mouse',
    descricao: 'Aprenda a mover, clicar e usar o mouse no computador.',
    bgClass: 'bg-brand-500',
    rota: '/primeiros-passos/mouse',
    isModal: true,
  },
  {
    id: 'teclado',
    Icone: Keyboard,
    titulo: 'Usar o Teclado',
    descricao: 'Aprenda a localizar teclas, digitar, editar textos e usar atalhos básicos.',
    bgClass: 'bg-brand-400',
    rota: '/primeiros-passos/teclado',
    isModal: true,
  },
  // TODO: atividades em elaboração
  // {
  //   id: 'janelas',
  //   Icone: AppWindow,
  //   titulo: 'Usar Janelas',
  //   descricao: 'Aprenda a abrir, fechar e organizar janelas na tela.',
  //   bgClass: 'bg-green-500',
  //   rota: null,
  // },
  // {
  //   id: 'login',
  //   Icone: KeyRound,
  //   titulo: 'O que é um Login',
  //   descricao: 'Entenda o que são usuário e senha e como entrar em um site.',
  //   bgClass: 'bg-gray-900',
  //   rota: null,
  // },
];

const PrimeirosPassosList = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = (trilha) => {
    if (!trilha.rota) return;
    if (trilha.isModal) {
      navigate(trilha.rota, { state: { backgroundLocation: location } });
    } else {
      navigate(trilha.rota);
    }
  };

  return (
    <section className="w-full bg-gray-100 py-16 px-6 md:px-16 lg:px-[120px]">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {trilhas.map((trilha) => {
          const { id, Icone, titulo, descricao, bgClass, rota } = trilha;
          return (
            <button
              key={id}
              onClick={() => handleClick(trilha)}
              disabled={!rota}
              className={[
                bgClass,
                'rounded-[32px] p-10 flex flex-col items-center text-center gap-6 text-white shadow-lg',
                rota
                  ? 'hover:scale-[1.03] transition-transform duration-200 cursor-pointer'
                  : 'opacity-50 cursor-not-allowed',
              ].join(' ')}
            >
              <Icone size={72} strokeWidth={1.5} />
              <h2 className="text-[34px] font-bold font-title leading-tight">
                {titulo}
              </h2>
              <p className="text-xl font-['Lato'] leading-relaxed max-w-xs">
                {descricao}
              </p>
              {!rota && (
                <span className="text-sm font-medium bg-white/20 px-3 py-1 rounded-full">
                  Em breve
                </span>
              )}
            </button>
          );
        })}
      </div>
    </section>
  );
};

export default PrimeirosPassosList;

