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

const Index = () => {
    const { puntos, pagination } = usePage().props as any;
    const initialData = Array.isArray(puntos) ? puntos : [];
    const initialPagination = pagination || { current_page: 1, last_page: 1, per_page: initialData.length || 12, total: initialData.length, from: 0, to: initialData.length };
    return (
        <React.Fragment>
            <Head title='Puntos de Suministro'/>
            <div className="page-content">
                <Container fluid>
                    <Row className="mb-3">
                        <Col className="d-flex justify-content-end">
                            <button
                                type="button"
                                className={`btn btn-sm`}
                                style={{
                                    minWidth: 180,
                                    fontWeight: 500,
                                    background: '#fff7e6',
                                    border: '2px solid orange',
                                    color: 'orange',
                                    transition: 'all 0.2s'
                                }}
                                onClick={() => router.visit(route('puntos-suministro.crear'))}
                                title="Agregar punto de suministro"
                            >
                                <i className="fas fa-plug me-2"></i>
                                Agregar Punto
                            </button>
                        </Col>
                    </Row>
                    <Row>
                        <Col lg={12}>
                            <Card>
                                <Card.Header>
                                    <h5 className="card-title mb-0">Puntos de Suministro</h5>
                                </Card.Header>
                                <Card.Body>
                                    <PuntoCardsView initialPuntos={initialData} initialPagination={initialPagination} />
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        </React.Fragment>
    );
};
Index.layout = (page:any) => <Layout children={page}/>;
export default Index;
