import '../../setup-fixture';

import { type Picture } from '../../model/Picture';
import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
import { CarouselTariffsCard } from './CarouselTariffsCard';
import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';

export const IMAGE_MONTH: Picture = {
  src: 'monthly-payment.png',
  format: 'webp',
  size: {
    width: 266,
    height: 73,
  },
  title: 'money',
};

const BUTTON: LinkButtonContent = {
  href: '/',
  text: 'Открыть расчетный счет',
  target: '_blank',
  version: 'primary',
};

const BUTTON_SECONDARY: LinkButtonContent = {
  href: '/',
  text: 'Открыть расчетный счет',
  target: '_blank',
  version: 'secondary',
};

const BUTTON_ICON: LinkButtonContent = {
  text: 'App Store',
  icon: { icon: 'DocIcon' },
  href: 'rshb.ru',
  version: 'link',
};

const CARD_CELLS = [
  { title: 'Открытие расчетного счета', description: 'Бесплатно' },
  { title: 'Внутрибанковские платежи', description: '0 ₽' },
  { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
  { title: 'От 11 платежей', description: '50 ₽/шт.' },
  {
    title: 'Внесение наличных',
    description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
  },
  { title: 'Зарплатный проект', description: 'Бесплатно' },
  { buttons: [BUTTON_ICON] },
];

export const TARIFFS_CARD: CarouselTariffsCardContent = {
  title: 'Расчётный эконом',
  icon: IMAGE_MONTH,
  button: BUTTON_SECONDARY,
  cardCells: CARD_CELLS,
  visibleCellsCount: 2,
};

export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
  icon: IMAGE_MONTH,
  title: 'Расчётный эконом',
  button: BUTTON,
  cardCells: CARD_CELLS,
  isHighlighting: true,
};

const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD} />;

export default {
  default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
};