import clsx from 'clsx';
import { Card, CardLink } from '@/components/card';
import Star from '@/assets/images/thick-round-star-6.svg';
import useLocale, { LocalesMap } from '@/utils/useLocale';
import { caveat } from '@/styles/fonts';
import styles from './addCityCard.module.scss';

const locales: LocalesMap = {
  ru: {
    title: 'Помогите добавить свой город',
    description:
      'Знаете, где найти расписание транспорта в вашем городе? Поделитесь источником — это поможет расширить RideBus.',
    city: 'Название города',
    cityDescription: 'Расскажите, для какого города нужно расписание.',
    source: 'Источник расписания',
    sourceDescription:
      'Пришлите ссылку на сайт перевозчика или актуальное расписание.',
    details: 'Полезные подробности',
    detailsDescription:
      'Если знаете, добавьте номера маршрутов и названия остановок.',
    handwritten: 'Начнём с вашего города',
    contact: 'Напишите в Telegram',
    contactDescription: 'Пришлите название города и источник расписания',
    email: 'Или напишите на почту',
    emailSubject: 'Новый город для RideBus',
    emailBody:
      'Город: \nИсточник расписания: \nМаршруты и остановки (если известны): \n',
  },
  en: {
    title: 'Help add your city',
    description:
      'Know where to find your city’s transport timetable? Share a source to help bring RideBus to more cities.',
    city: 'Your city',
    cityDescription: 'Tell us which city needs a timetable.',
    source: 'A timetable source',
    sourceDescription:
      'Send a link to the transport operator’s website or a current timetable.',
    details: 'Helpful details',
    detailsDescription:
      'Include route numbers and stop names if you know them.',
    handwritten: 'Let’s start with your city',
    contact: 'Get in touch on Telegram',
    contactDescription: 'Send your city’s name and a timetable source',
    email: 'Or send an email',
    emailSubject: 'A new city for RideBus',
    emailBody: 'City: \nTimetable source: \nRoutes and stops (if known): \n',
  },
};

export function AddCityCard() {
  const t = useLocale(locales);
  const email = `mailto:xtimms@live.com?subject=${encodeURIComponent(t('emailSubject'))}&body=${encodeURIComponent(t('emailBody'))}`;
  return (
    <section aria-label={t('title')}>
      <Card
        className={styles.card}
        title={t('title')}
        subtitle={t('description')}
        classes={{ content: styles.content }}
      >
        <Star className={styles.star} aria-hidden="true" />
        <ol className={styles.steps}>
          {['city', 'source', 'details'].map((step, index) => (
            <li key={step}>
              <span className={styles.number} aria-hidden="true">
                {index + 1}
              </span>
              <div>
                <h4>{t(step)}</h4>
                <p>{t(`${step}Description`)}</p>
              </div>
            </li>
          ))}
        </ol>
        <div className={styles.contact}>
          {/* <span className={clsx(styles.handwritten, caveat.className)}>
            {t('handwritten')}
          </span> */}
          <div className={styles.links}>
            <CardLink
              title={t('contact')}
              hrefTitle={t('contactDescription')}
              href="https://t.me/xtimms"
              className={styles.link}
            />
            <CardLink
              title={t('email')}
              hrefTitle="xtimms@live.com"
              href={email}
              className={styles.link}
            />
          </div>
        </div>
      </Card>
    </section>
  );
}