import React, { useState } from 'react';

const LoveQuotesApp = () => {
  const [quote, setQuote] = useState('');

  const quotes = [
enter quotes here
  ];

  const getRandomQuote = () => {
    if (quotes.length > 0) {
      const randomIndex = Math.floor(Math.random() * quotes.length);
      setQuote(quotes[randomIndex]);
    } else {
      setQuote("No quotes available. Please add some quotes to the list.");
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>💘 Love Quotes 💘</h1>
      <div style={styles.quoteBox}>
        <p style={styles.quote}>{quote || "Click 'New Quote' to get inspired!"}</p>
      </div>
      <button style={styles.button} onClick={getRandomQuote}>💟 New Quote 💟</button>
    </div>
  );
};

const styles = {
  container: {
    textAlign: 'center',
    fontFamily: 'Arial, sans-serif',
    padding: '40px',
    backgroundColor: '#ffe6ff',
    borderRadius: '20px',
    maxWidth: '600px',
    margin: 'auto',
    marginTop: '50px',
    boxShadow: '0 0 30px rgba(0, 0, 0, 0.2)',
    border: '5px solid #ffb3e6',
  },
  title: {
    fontSize: '3em',
    color: '#ff66b2',
    marginBottom: '20px',
    textShadow: '2px 2px #ffb3e6',
  },
  quoteBox: {
    backgroundColor: '#ffffff',
    borderRadius: '15px',
    padding: '20px',
    margin: '20px 0',
    border: '3px dashed #ffb3e6',
    boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
  },
  quote: {
    fontSize: '1.8em',
    color: '#333',
    fontStyle: 'italic',
  },
  button: {
    backgroundColor: '#ff66b2',
    color: '#fff',
    border: 'none',
    borderRadius: '10px',
    padding: '15px 30px',
    fontSize: '1.2em',
    cursor: 'pointer',
    transition: 'background-color 0.3s, transform 0.3s',
    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.3)',
  },
};

export default LoveQuotesApp;