import React from 'react';
import classNames from 'classnames/bind';

import styles from './BannerCard.scss';
import { Link } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';

const cx = classNames.bind(styles);

interface IOwnProps {
  isMain?: boolean;
  className?: string;
  src: string;
  collectionName: string;
};

const BannerCard: React.FC<IOwnProps> = ({
  isMain,
  className,
  src,
  collectionName
}) => {
  return (
    // 배너 카드 종류 big, small
    <div className={cx('banner_card', isMain && 'main', className)}>
      <Link to={URLInfo.getProfileCollectionUrl(collectionName)} className={cx('card_box')}>
        <img
          width="100%"
          className={cx('thumb')}
          src={src}
          alt={collectionName}
        />
        <strong className={cx('title')}>{collectionName}</strong>
      </Link>
    </div>
  );
};

export default BannerCard;
