import { ReactNode } from "react"
import { ListGroup } from "react-bootstrap";

interface Data {
    label: ReactNode;
    value: ReactNode;
}

interface Props {
    data: Data[];
    title?: ReactNode;
    flush?: boolean;
    innerClass?: string;
    itemClass?: string;
    justifyContent?: "start" | "between";
}

export default function ListView({ data, title, flush = false, innerClass, itemClass, justifyContent = "start" }: Props) {
    return (
        <ListGroup variant={flush ? "flush" : undefined} className={innerClass}>
            {!!title && <ListGroup.Item className={itemClass}>{title}</ListGroup.Item>}
            {data.map((item, idx) => (
                <ListGroup.Item key={idx} className={itemClass}>
                    <div className={`d-flex flex-wrap align-items-start justify-content-${justifyContent} gap-1`}>
                        <div className="fw-medium">{item.label}</div>
                        <div className="text-muted">{item.value}</div>
                    </div>
                </ListGroup.Item>
            ))}
        </ListGroup>
    )
}