import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage';
/**
 * Created by David Garcia for Finboot.
 * 
 * Custom Card component for Docusaurus.
 */

import clsx from 'clsx';
import React from 'react';

import { CardProps } from '../types';
import styles from './styles.module.css';

export default function Card(props:CardProps) {
    const {
        title,
        content,
        link,
        target,
        buttonText,
        iconLight,
        iconDark,
        className,
        style,
    } = props;
    
    const sources = {
        light: useBaseUrl(iconLight),
        dark: useBaseUrl(iconDark),
      };
    
    let ctaButton, themedImage;

    if (iconLight && iconDark) {
        themedImage = (
            <ThemedImage
            sources={sources}
            height='30px'
            width='30px'
            alt='card icon'
            />
        );  
    }
    
    if (buttonText) {
        ctaButton = (
            <button className="button button--default button--lg">{buttonText}</button>
        )
    }
    let targetAttr = target;
    if (!targetAttr) {
        targetAttr = "_self";
    }

    return (
        // @ts-ignore style always exists
        <Link to={link} className={clsx(styles.cardWrapper, className, styles[style])} target={targetAttr}>
            <div className={clsx("card", styles.card)}>
                <div className={clsx("card-header", styles.cardHeader)}>
                <div className={clsx(styles.cardIcon)}>
                        {themedImage}
                    </div>
                    <div className={clsx(styles.cardHeading)}>
                        <h3>{title}</h3>
                    </div>
                    <div className={clsx(styles.cardBody)}>
                        <p>
                        {content}
                        </p>
                    </div>
                </div>
                <div className={clsx("card-footer", styles.cardFooter)}>
                    {ctaButton}
                </div>
            </div>
        </Link>
    );
};