slp-modular-cms/frontend/src/features/offerings/components/OfferingsList.tsx

import { DndContext, DragOverlay, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useTranslation } from 'react-i18next';
import { GripVertical } from 'lucide-react';
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { OfferingRow } from './OfferingRow';
import { useOfferingsDnd } from '../hooks/useOfferingsDnd';
import type { OfferingAdminDto } from '../services/types';

interface OfferingsListProps {
    offerings: OfferingAdminDto[];
    onDeleteRequested: (offering: OfferingAdminDto) => void;
}

export function OfferingsList({ offerings, onDeleteRequested }: OfferingsListProps) {
    const { t } = useTranslation();
    const { items, sensors, activeItem, handleDragStart, handleDragEnd } = useOfferingsDnd(offerings);

    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
        >
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead />
                        <TableHead>{t('offerings.table.title')}</TableHead>
                        <TableHead>{t('offerings.table.price')}</TableHead>
                        <TableHead>{t('offerings.table.featured')}</TableHead>
                        <TableHead>{t('offerings.table.actions')}</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <SortableContext items={items.map((o) => o.id)} strategy={verticalListSortingStrategy}>
                        {items.map((offering, index) => (
                            <OfferingRow
                                key={offering.id}
                                offering={offering}
                                isFirst={index === 0}
                                isLast={index === items.length - 1}
                                onDeleteRequested={() => onDeleteRequested(offering)}
                            />
                        ))}
                    </SortableContext>
                </TableBody>
            </Table>

            {/* Rendered in a portal outside document flow, so the dragged item's position
                never grows the page's scrollable area the way transforming a table row in
                place would (a real browser behavior with in-place transforms, not a bug in
                dnd-kit itself). */}
            <DragOverlay>
                {activeItem && (
                    <div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3 shadow-lg">
                        <GripVertical className="size-4 text-muted-foreground" />
                        <span className="font-medium">{activeItem.title}</span>
                        <span className="text-muted-foreground">{activeItem.price}</span>
                    </div>
                )}
            </DragOverlay>
        </DndContext>
    );
}