import React, {useEffect, useState} from 'react';

// <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

export default function Card({title, icon, children}) {

  const [svgData, setSvgData] = useState(undefined)

  useEffect(async () => {
    if (icon) {
      const svgData = (await import(`@icons/${icon}.svg`)).default
      setSvgData(svgData);
    }
  }, [icon])

  return <div className="relative flex flex-col items-center p-6 bg-white rounded shadow-xl">
    {svgData && <img className="w-16 h-16 mb-2" src={svgData}/>}

    <h4 className="text-xl font-bold leading-snug tracking-tight mb-1" style={{ textAlign: "center" }}  >FIT-Connect <br/> für {title}</h4>
    {children}
  </div>
}