import React from 'react';
import style from './BotaoImagem.module.scss';
import editar from '../../assets/img/editar.svg';
import excluir from '../../assets/img/excluir.svg';
import detalhar from '../../assets/img/detalhar.svg';
import { JsxElement } from 'typescript';

interface Props {
  tipo?: "editar" | "excluir" | "detalhar" | undefined,
  onClick?: () => void,
  children?: React.ReactNode
}



function BotaoImagem({ onClick, tipo, children }: Props) {
  let imagem;
  if (tipo === "detalhar") { 
  imagem =     <img
  onClick={onClick}
  className={style.botao}     
  src={detalhar}
>
  {children}
</img>;
  }
  if (tipo === "editar") {  
  imagem =     <img
  onClick={onClick}
  className={style.botao}     
  src={editar}
>
  {children}
</img>;  
 } 

 if (tipo === "excluir") {  
  imagem =     <img
  onClick={onClick}
  className={style.botao}     
  src={excluir}
>
  {children}
</img>;  
 } 
  console.log(tipo);
  console.log({imagem});
  return (
    <div className="App">
    {imagem}
    </div>
  )
}

export default BotaoImagem;