import React from 'react';
import cn from 'classnames';

type CardProps = {
  heading: string;
  icon?: 'book' | 'clock' | 'graph' | 'user';
  bodyText: string;
  children: React.ReactNode;
};

// Temporary approach. @todo remove after implementing icons
const Icon = props => {
  switch (props.icon) {
    case 'book':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <path
            d="M62.36,6.28C61.88,6.02,50.35,0,42.24,0A16.619,16.619,0,0,0,31.98,3.73,16.6,16.6,0,0,0,21.72,0C13.61,0,2.09,6.02,1.6,6.28A3.011,3.011,0,0,0,0,8.94L.04,48.16a2.988,2.988,0,0,0,4.11,2.77c.09-.04,8.29-3.76,15.32-3.76,3.91,0,4.09.2,4.41.36a3.974,3.974,0,0,1,.84,2.43,1.053,1.053,0,0,1-1.17,1.16c-1.11-.06-2.48-.14-4.08-.14A36.645,36.645,0,0,0,5.53,54.26a2.946,2.946,0,0,0-1.6,3.9A2.754,2.754,0,0,0,6.47,60a4.753,4.753,0,0,0,1.36-.24c.09-.03,6.85-2.82,12.63-2.82,1.42,0,1.65.07,2.74.13,2.83.16,5.06.29,6.62-1.49,1.51-1.73,1.07-4.45.9-5.33l-.12-1.66c-1.01-5.46-2.84-7.4-11.13-7.4-5.03,0-9.72,1.51-13.46,2.73L5.96,11.13C9.77,9.31,17.07,6.36,21.63,6.36A8.775,8.775,0,0,1,29,9.98V39.53a3,3,0,0,0,6,0V9.98a8.738,8.738,0,0,1,7.35-3.62c4.56,0,11.84,2.95,15.65,4.77l.04,32.79c-3.74-1.21-8.43-2.73-13.46-2.73-8.29,0-10.12,1.94-11.13,7.4l-.12,1.66c-.17.88-.61,3.6.9,5.33,1.56,1.78,3.79,1.66,6.62,1.49,1.08-.06,1.32-.13,2.74-.13,5.78,0,12.54,2.78,12.63,2.82a3.625,3.625,0,0,0,1.4.24,2.789,2.789,0,0,0,2.5-1.85,2.939,2.939,0,0,0-1.6-3.9,36.852,36.852,0,0,0-13.94-3.28c-1.59,0-2.97.08-4.08.14a1.053,1.053,0,0,1-1.17-1.16,4,4,0,0,1,.84-2.43c.32-.16.49-.36,4.41-.36,7.03,0,15.23,3.72,15.32,3.76a2.952,2.952,0,0,0,2.79-.29A3,3,0,0,0,64,48.16L63.96,8.94A2.992,2.992,0,0,0,62.36,6.28Z"
            transform="translate(0 2)"
          />
        </svg>
      );
    case 'clock':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <g>
            <path d="M32,0A32,32,0,1,0,64,32,32.036,32.036,0,0,0,32,0Zm0,58A26,26,0,1,1,58,32,26.025,26.025,0,0,1,32,58Z" />
            <path d="M35.5,29.55V17.99a3.5,3.5,0,0,0-7,0V31h0a3.232,3.232,0,0,0,.07.69c.02.09.05.17.07.25a2.671,2.671,0,0,0,.13.4c.04.09.09.18.14.27.06.11.11.23.18.34a2.971,2.971,0,0,0,.28.34,1.3,1.3,0,0,0,.15.18l9.2,9.2a3.5,3.5,0,1,0,4.95-4.95Z" />
          </g>
        </svg>
      );
    case 'graph':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <path
            d="M4674,3419v-26a3,3,0,0,1,6,0v26a3,3,0,0,1-6,0Zm-14,0v-54a3,3,0,1,1,6,0v54a3,3,0,1,1-6,0Zm-14,0v-34a3,3,0,0,1,6,0v34a3,3,0,1,1-6,0Zm-14,0v-18a3,3,0,0,1,6,0v18a3,3,0,0,1-6,0Z"
            transform="translate(-4624 -3360)"
          />
        </svg>
      );
    case 'user':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <g transform="translate(0 2)">
            <path d="M32,34A17,17,0,1,0,15,17,17.024,17.024,0,0,0,32,34ZM32,6A11,11,0,1,1,21,17,11.007,11.007,0,0,1,32,6Z" />
            <path d="M46,38H18.18A18.206,18.206,0,0,0,0,56.18v.64A3.155,3.155,0,0,0,3,60a3.155,3.155,0,0,0,3-3.18v-.64A12.189,12.189,0,0,1,18.18,44H46A12.01,12.01,0,0,1,58,56v.82a3.005,3.005,0,1,0,6,0V56A18.027,18.027,0,0,0,46,38Z" />
          </g>
        </svg>
      );
  }
};

export const Card: React.FC<CardProps> = ({
  heading,
  icon,
  bodyText,
  children,
}: CardProps) => {
  const classes = cn('bfo-card');
  return (
    <div className={classes}>
      <div className="bfo-card__header">
        {icon && (
          <div className="bfo-card__icon">
            <Icon icon={icon} />
          </div>
        )}
        {heading && <h3 className="bfo-card__heading">{heading}</h3>}
      </div>
      {bodyText && <p className="bfo-card__body">{bodyText}</p>}

      {children && <div className="bfo-card__footer">{children}</div>}
    </div>
  );
};
