Reviews

                                        import React from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';
import { Card, Avatar } from 'react-native-paper';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

// Demo Reviews Data
const reviews = [
  {
    id: '1',
    name: 'John Doe',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    rating: 5,
    comment: 'Absolutely loved the experience! Highly recommended.',
    date: 'March 5, 2025',
  },
  {
    id: '2',
    name: 'Jane Smith',
    avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
    rating: 4,
    comment: 'Great service, will definitely come back again!',
    date: 'March 10, 2025',
  },
  {
    id: '3',
    name: 'Alex Johnson',
    avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    rating: 3,
    comment: 'Good, but there’s room for improvement.',
    date: 'March 15, 2025',
  },
  {
    id: '4',
    name: 'Mike',
    avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    rating: 3,
    comment: 'Nice job!',
    date: 'April 2, 2025',
  },
];

// Star Rating Component
const StarRating  = ( rating: any ) => {
  const stars = [];

  for (let i = 1; i <= 5; i++) {
    stars.push(
      <Ionicons
        key={i}
        name={i <= rating ? 'star' : 'star-outline'}
        size={20}
        color="#FFD700"
        style={{ marginHorizontal: 1 }}
      />
    );
  }

  return <View style={{ flexDirection: 'row', marginVertical: 4 }}>{stars}</View>;
};

export default function ReviewScreen() {
  return (
    <LinearGradient colors={['#f8f9fa', '#e0eafc']} style={styles.container}>
      <Text style={styles.title}>Customer Reviews</Text>

      <FlatList
        data={reviews}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingBottom: 20 }}
        renderItem={({ item }) => (
          <Card style={styles.card}>
            <Card.Title
              title={item.name}
              subtitle={item.date}
              left={(props) => (
                <Avatar.Image {...props} source={{ uri: item.avatar }} size={48} />
              )}
            />
            <Card.Content>
              <StarRating rating={item.rating} />
              <Text style={styles.comment}>{item.comment}</Text>
            </Card.Content>
          </Card>
        )}
      />
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
    alignSelf: 'center',
  },
  card: {
    marginHorizontal:16,
    marginBottom: 16,
    borderRadius: 16,
    elevation: 5,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
  },
  comment: {
    fontSize: 16,
    color: '#555',
    marginTop: 8,
    lineHeight: 22,
  },
});