src/components/SearchResults.jsx

import React from 'react';
import styled from 'styled-components';
import FeedbackForm from './FeedbackForm';

const ResultsContainer = styled.div`
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: ${({ theme }) => theme.colors.cardBg};
  border-radius: ${({ theme }) => theme.radii.large};
  box-shadow: ${({ theme }) => theme.shadows.medium};
`;

const ResultItem = styled.div`
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: ${({ theme }) => theme.colors.background};
  border-radius: ${({ theme }) => theme.radii.medium};
  border-left: 4px solid ${({ theme }) => theme.colors.primary};
`;

const ResultText = styled.p`
  font-size: 1.1rem;
  line-height: 1.6;
  color: ${({ theme }) => theme.colors.text};
  margin-bottom: 1rem;
`;

const MetaInfo = styled.div`
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: ${({ theme }) => theme.colors.muted};
`;

const ModelBadge = styled.span`
  padding: 0.25rem 0.5rem;
  border-radius: ${({ theme }) => theme.radii.small};
  background: ${({ theme, modelType }) => 
    modelType.includes('UAE') ? theme.colors.accent1 : theme.colors.accent2};
  color: white;
  font-weight: bold;
`;

const SimilarityScore = styled.span`
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primary};
`;

const SearchResults = ({ results, onFeedbackSubmit }) => {
  if (!results || results.length === 0) return null;

  return (
    <ResultsContainer>
      <h2>Wisdom from Al-Ghazali</h2>
      {results.map((result, index) => (
        <div key={index}>
          <ResultItem>
            <ResultText>{result.text}</ResultText>
            <MetaInfo>
              <ModelBadge modelType={result.model_type}>
                {result.model_type.split('_')[0]}
              </ModelBadge>
              <SimilarityScore>
                {(result.similarity * 100).toFixed(1)}% match
              </SimilarityScore>
            </MetaInfo>
          </ResultItem>
          <FeedbackForm 
            query={result.query} 
            retrievedText={result.text}
            modelType={result.model_type}
            onSubmit={onFeedbackSubmit}
          />
        </div>
      ))}
    </ResultsContainer>
  );
};

export default SearchResults;