import React from 'react';
import { formatDate } from 'utils/helpers';

import { useRouter } from 'next/router';

import SVGArrowRight from 'assets/svg/arrow-right.svg';

import { useTranslation } from 'utils/i18n';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';

import s from './Item.module.scss';

interface ItemProps {
  cardId: string;
  color?: string;
  name: string;
  expiry: Date;
  count?: number | null;
  image: string;
}

export const Item = ({ cardId, name, expiry, count, image }: ItemProps) => {
  const { t } = useTranslation('cards');
  const router = useRouter();

  return (
    <LinkWrapper
      className={s.item}
      href={`/${router.query.ssn}/felagakort/kortid?cardId=${cardId}`}
    >
      <div className={s.item__container}>
        <div className={s.item__shadow}>
          <div className={s.item__wrapper}>
            <div className={s.item__content}>
              <h3 className={s.item__title}>{name}</h3>

              <div className={s.item__info}>
                {`${t('cards.cardValid')}: ${formatDate(expiry, 'dd.MM.yyyy')}`}
              </div>

              <div className={s.item__counter}>
                <p className={s.item__counterValue}>{count ?? 0}</p>
                <p className={s.item__counterDescription}>{t('cards.cardUser')}</p>
              </div>

              <div className={s.item__more}>
                <SVGArrowRight />
                {t('cards.cardButton')}
              </div>
            </div>

            <div className={s.item__image}>
              <img src={image} alt={`Card preview for ${name}`} />
            </div>
          </div>
        </div>
      </div>
    </LinkWrapper>
  );
};