"use client";

import { FC } from "react";
import useServicesInnerTableColumns from "@/app/services/components/shared/ServicesTable/hooks/servicesInnerTableColumns";
import DraggableTableRow from "@/components/dnd-pangea/DraggableTableRow/DraggableTableRow";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { ServiceSchema } from "@/lib/client";

type Props = {
    services: ServiceSchema[];
    categoryId: number;
};

const InnerServicesTable: FC<Props> = ({ services, categoryId }) => {
    const innerColumns = useServicesInnerTableColumns();

    return (
        <BaseTable
            key={categoryId}
            withTableBorder
            columns={innerColumns}
            records={services}
            verticalSpacing={"md"}
            groups={undefined}
            styles={{ table: { width: "100%" } }}
            rowFactory={({ record, children, ...props }) => (
                <DraggableTableRow
                    draggableId={`service-${record.id}`}
                    rowElement={children}
                    disableDndOnMobile
                    {...props}
                />
            )}
        />
    );
};

export default InnerServicesTable;
