import { Card, Col, Container, Row } from 'react-bootstrap';
import { Head, usePage } from '@inertiajs/react';
import React from 'react';
import Layout from '../../../../Layouts';
import TarifasCardsView from './TarifasCardsView';

const Index = () => {
  const { tarifas, pagination, tipoTarifa } = usePage().props as any;
  const initialData = Array.isArray(tarifas) ? tarifas : [];
  const initialPagination = pagination || { current_page: 1, last_page: 1, per_page: 12, total: initialData.length };
  const tipo = (tipoTarifa === 'gas' ? 'gas' : 'electrica') as 'electrica' | 'gas';

  return (
    <React.Fragment>
      <Head title="Tarifas" />
      <div className="page-content">
        <Container fluid>
          <Row>
            <Col lg={12}>
              <Card>
                <Card.Header><h5 className="card-title mb-0">Tarifas</h5></Card.Header>
                <Card.Body>
                  <TarifasCardsView initialItems={initialData} initialPagination={initialPagination} tipoTarifaInicial={tipo} />
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    </React.Fragment>
  );
};

Index.layout = (page: any) => <Layout children={page} />;
export default Index;
