import styles from './shareCard.module.scss';
import { Card } from '@/components/card';
import clsx from 'clsx';
import useLocale, { LocalesMap } from '@/utils/useLocale';
import { CursorEffect } from '@/components/cursor';

const locales: LocalesMap = {
  ru: {
    appName: 'RideBus',
    slogan: 'Приложение, которое поможет вам удобно смотреть расписание общественного транспорта',
    title: 'Расскажите друзьям',
    description:
      'Мне очень важно, чтобы мои проекты приносили пользу. Если вы расскажете своим друзьям о своем опыте использования этого приложения и как оно помогло вам, я буду вам очень признателен.',
  },
  en: {
    appName: 'RideBus',
    slogan: 'An app that helps you conveniently view public transportation schedules',
    title: 'Tell your friends',
    description:
      'It is very important to me that my projects bring benefits. If you tell your friends about your experience using this application and how it helped you, I will be very grateful to you.',
  },
};

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

  const ShareCard = (
    <Card
      className={clsx(styles.card)}
      title={t('title')}
      subtitle={t('description')}
      backdropOnText
      classes={{ subtitle: styles.description, content: styles.content }}
      onClick={() => {
        if (navigator.share) {
          navigator
            .share({
              title: t('appName'),
              text: t('slogan'),
              url: 'https://ridebus.by/',
            })
            .then(() => {
              console.log('Thanks for sharing!');
            })
            .catch(console.error);
        }
      }}
    >
    </Card>
  );
  if (typeof window !== 'undefined' && (navigator.share as any)) {
    return (
      <CursorEffect cursorPadding={8} cursorBorderRadius={36}>
        {ShareCard}
      </CursorEffect>
    );
  } else {
    return ShareCard;
  }
}