import { Card, Col, Container, Row, Button } from 'react-bootstrap';
import { Head, usePage, router } from '@inertiajs/react';
import Layout from '../../../Layouts';
import React from 'react';
import { IFlashMessage } from '../../../interfaces';
import ContactosCardsView from './ContactosCardsView';
import { Plus } from 'lucide-react';

const ContactosIndex = () => {
    const { contactos, pagination } = usePage().props as any;
    const flash = usePage().props.flash as unknown as IFlashMessage;
    const initialData = Array.isArray(contactos) ? contactos : [];
    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='Contactos' />
            <div className="page-content">
                <Container fluid>
                    <Row>
                        <Col lg={12}>
                            <Card>
                                <Card.Header className="d-flex justify-content-between align-items-center">
                                    <h5 className="card-title mb-0">Contactos</h5>
                                    <Button
                                        variant="primary"
                                        size="sm"
                                        onClick={() => router.visit('/contactos/crear')}
                                    >
                                        <Plus size={16} className="me-1" />
                                        Crear Contacto
                                    </Button>
                                </Card.Header>
                                <Card.Body>
                                    <ContactosCardsView
                                        initialContactos={initialData}
                                        initialPagination={initialPagination}
                                        flash={flash}
                                    />
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        </React.Fragment>
    );
};

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