import { ConsultResponse } from '../types';
interface GuidanceBoxProps {
data: ConsultResponse;
}
export function GuidanceBox({ data }: GuidanceBoxProps) {
return (
<div>
{data.principles.length > 0 && (
<>
<h3 style={{ color: 'var(--accent-color)', marginBottom: 15 }}>Relevant Principles</h3>
{data.principles.map((p, i) => (
<div key={i} className="result-card">
<div className="result-header">
<span className="result-type type-principle">principle</span>
<span className="result-source">{p.source}</span>
</div>
<div className="result-content">{p.content}</div>
</div>
))}
</>
)}
{data.patterns.length > 0 && (
<>
<h3 style={{ color: '#059669', margin: '20px 0 15px' }}>Relevant Patterns</h3>
{data.patterns.map((p, i) => (
<div key={i} className="result-card">
<div className="result-header">
<span className="result-type type-learning">pattern</span>
<span className="result-source">{p.source}</span>
</div>
<div className="result-content">{p.content}</div>
</div>
))}
</>
)}
<div className="guidance-box">
<div className="guidance-title">Oracle Guidance</div>
<div className="guidance-content">{data.guidance}</div>
</div>
</div>
);
}
