import Link from 'next/link';
import { Card } from '@/components/card';
import { CursorEffect } from '@/components/cursor';
import Star from '@/assets/images/thick-round-star-5.svg';
import LinkIcon from '@/assets/icons/link.svg';
import useLocale from '@/utils/useLocale';
import { locales } from './locales';
import styles from './reportCard.module.scss';

export function ReportCard() {
  const t = useLocale(locales);

  return (
    <Card
      className={styles.card}
      role="region"
      aria-label={t('title')}
      title={t('title')}
      subtitle={t('description')}
      classes={{ content: styles.content, subtitle: styles.subtitle }}
    >
      <Star className={styles.star} aria-hidden="true" />
      <div className={styles.badges} aria-hidden="true">
        <span>{t('timetable')}</span>
        <span>{t('routes')}</span>
        <span>{t('stops')}</span>
      </div>
      <CursorEffect
        className={styles.action}
        cursorBorderRadius={16}
        cursorPadding={4}
        effectForce={3}
      >
        <Link href="/contribute">
          {t('action')}
          <LinkIcon aria-hidden="true" />
        </Link>
      </CursorEffect>
    </Card>
  );
}