import {Flex, Table} from '@mantine/core';
import BarkButton from "../../common/components/BarkButton.tsx";
import {Link, NavLink} from "react-router";
import useCustomerList from "./hooks/useCustomerList.tsx";


function CustomerList() {

    const customerQuery  = useCustomerList();

    if (customerQuery.isPending) return 'Loading...'

    if (customerQuery.error) return 'An error has occurred: ' + customerQuery.error.message


    return (
        <>
            <Flex
                mih={50}
                gap="xl"
                justify="center"
                align="center"
                direction="row"
                wrap="wrap"
            >
                <p>
                    ARFF ARFF BARK BARK
                </p>
                <NavLink to={'/customers/AddCustomer'}><BarkButton>Add Customer</BarkButton></NavLink>
            </Flex>

            <Table striped>
            <Table.Thead>
                <Table.Tr>
                    <Table.Th c="red">Name</Table.Th>
                    <Table.Th c="red">Company</Table.Th>
                </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                {customerQuery.data?.map((data) => (
                    <Table.Tr key={data.id}>
                        <Table.Td>{data.name}</Table.Td>
                        <Table.Td>{data.company}</Table.Td>
                        <Table.Td>
                            <Link to={`/customers/customerDetail/${data.id}`}>Details</Link>
                        </Table.Td>
                    </Table.Tr>
                ))}
                </Table.Tbody>
            </Table>
        </>
    )
}
export default CustomerList;