import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Paper, Typography, useTheme } from "@mui/material";

type SortableItemProps = {
    id: string;
    order: {
        id: string;
        total: number;
    };
    onClick: () => void;
};

export default function SortableItem({ id, order, onClick }: SortableItemProps) {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
    const theme = useTheme();

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        cursor: "grab",
    };

    return (
        <Paper
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            onClick={onClick}
            sx={{
                p: 2,
                mb: 2,
                backgroundColor: theme.palette.background.paper,
                color: theme.palette.text.primary,
                "&:hover": {
                    backgroundColor:
                        theme.palette.mode === "dark"
                            ? "rgba(255, 255, 255, 0.05)"
                            : "rgba(0, 0, 0, 0.04)",
                },
            }}
        >
            <Typography variant="body1">Order ID: {order.id}</Typography>
            <Typography variant="body2">Total: {order.total.toFixed(2)} €</Typography>
        </Paper>
    );
}
