import React from 'react';
import Page from './Page';
import Button from '../components/Button';
import Paper from '../components/Paper';
import waybill from '../assets/waybill.svg';
import product from '../assets/product.svg';
import contractors from '../assets/contractors.svg';

const cards = [
  {
    name: 'Товары',
    route: '/products',
    src: product,
    text: 'Веди учёт товаров для бухгалтерии и интернет-магазина в одном месте',
  },
  {
    name: 'Переводы',
    route: '/transfers',
    src: contractors,
    text: 'Сохраняй историю платежей и переводов от своих партнёров',
  },
  {
    name: 'Накладные',
    route: '/waybills',
    src: waybill,
    text: 'Проводи накладные в один клик и формируй отчёты',
  },
];

const Home: React.FC = () => (
  <Page title="Главная" actions={[{ name: 'Связаться с нами', variant: 'outlined' }]}>
    <div className="grid grid-flow-row lg:grid-cols-3">
      {cards.map(card => (
        <Paper key={card.route} variant="outlined" className="my-2 lg:m-5">
          <div className="h-full flex flex-col justify-between">
            <img className="h-60" src={card.src} alt="Накладная" />
            <div className="flex flex-col text-center">
              <p className="m-5 text-lg">{card.text}</p>
              <Button size="lg" route={card.route}>{card.name}</Button>
            </div>
          </div>
        </Paper>
      ))}
    </div>
  </Page>
);

export default Home;