const PlanogramList = ({ planogram, lang = 'vi' }) => {
    if (!planogram || planogram.length === 0) return null;
    
    const { Card, Row, Col } = ReactBootstrap;
    
    return (
        <div className="planogram-list w-100">
            <Row className="g-2" style={{ fontSize: 12 }}>
                {planogram.map((item, index) => (
                    <Col xs={12} key={item.plano_code || index}>
                        <Card className="border-0 shadow-sm">
                            <Card.Body style={{ padding: '10px' }}>
                                <Card.Title className="fw-bold mb-1" style={{ fontSize: 14 }}>
                                    {item.plano_desc} <span className="text-muted">({item.plano_code})</span>
                                </Card.Title>
                                <Card.Text className="mb-0 d-flex flex-wrap gap-3">
                                    <span>
                                        <strong>{lang === 'vi' ? "Loại:" : "Type:"}</strong> {item.plano_type}
                                    </span>
                                    <span>
                                        <strong>On Hook:</strong> {item.OnHook_YN}
                                    </span>
                                    <span>
                                        <strong>{lang === 'vi' ? "Số đơn vị:" : "Units:"}</strong> {item.fixel_units}
                                    </span>
                                </Card.Text>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    );
};