import { Draggable } from '@hello-pangea/dnd';
import { DragHandleHorizontalIcon } from '@radix-ui/react-icons';
import { Box, Button, Card, Flex, Text } from '@radix-ui/themes';

type TTaskCard = {
	title?: string;
	description?: string;
	id?: string;
	index?: number;
};

export default function TaskCard(props: TTaskCard) {
	return (
		<Draggable draggableId={props.id || '123'} index={props.index || 0}>
			{(provided) => (
				<Card
					className="!w-62"
					ref={provided.innerRef}
					{...provided.draggableProps}
				>
					<Flex direction="column" gap="2">
						<Text wrap="pretty">{props.title}</Text>
						<Button>Mark completed</Button>
						<Flex className="w-full !justify-center transition-transform">
							<Box
								className="px-10 cursor-grab"
								{...provided.dragHandleProps}
							>
								<DragHandleHorizontalIcon />
							</Box>
						</Flex>
					</Flex>
				</Card>
			)}
		</Draggable>
	);
}