// sentiment.js

import React, { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { Card, CardContent, Typography, Grid, Box, Tooltip } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import CountUp from "react-countup"; // Add this to animate counters

// Load GaugeComponent dynamically without SSR
const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(3),
  },
  mainCard: {
    marginBottom: theme.spacing(4),
  },
  headlineCard: {
    marginBottom: theme.spacing(3),
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
    borderRadius: '10px',
    overflow: 'hidden',
    '&:hover': {
      transform: 'scale(1.03)', // Slightly scale the card on hover
      boxShadow: '0 8px 20px rgba(0, 0, 0, 0.2)', // Increase shadow on hover
    },
  },
  titleCard: {
    fontWeight: 'bold',
    color: '#333',
    borderBottom: `1px solid ${theme.palette.divider}`,
    paddingBottom: theme.spacing(1),
    marginBottom: theme.spacing(2),
  },
  commentCard: {
    marginBottom: theme.spacing(1),
    backgroundColor: '#f9f9f9',
    borderRadius: '8px',
    padding: theme.spacing(2),
  },
  commentText: {
    color: '#555',
  },
  gaugeWrapper: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

const SentimentMeter = ({ value }) => {
  return (
    <Box sx={{ width: '450px', height: '250px', margin: '0' }}> {/* Centering the Gauge */}
      <GaugeComponent
        id="sentiment-gauge"
        value={value}
        type="semicircle"
        arc={{
          width: 0.2,
          padding: 0,
          cornerRadius: 1,
          subArcs: [
            { limit: 20, color: '#ea4228' },
            { limit: 40, color: '#f58b19' },
            { limit: 60, color: '#f5cd19' },
            { limit: 80, color: '#9fcd19' },
            { limit: 100, color: '#5be12c' }
          ]
        }}
        pointer={{
          type: "needle",
          color: '#345243',
          length: 0.80,
          width: 5,
          animate: true
        }}
        labels={{
          valueLabel: { hide: true },
          tickLabels: { hide: true }
        }}
        style={{
          width: '450px',
          height: '250px',
        }}
      />
    </Box>
  );
};

const CommentCard = ({ comment }) => {
  const classes = useStyles();
  return (
    <Box className={classes.commentCard}>
      <Typography variant="body2" className={classes.commentText}>
        {comment}
      </Typography>
    </Box>
  );
};

const HeadlineCard = ({ headline, comments, link }) => {
  const classes = useStyles();

  return (
    <Card
      className={classes.headlineCard}
      component="a"
      href={link}
      target="_blank"
      rel="noopener noreferrer"
      style={{ textDecoration: 'none' }}
    >
      <CardContent>
        <Typography variant="h6" className={classes.titleCard}>
          {headline}
        </Typography>
        {comments.map((comment, index) => (
          <CommentCard key={index} comment={comment} />
        ))}
      </CardContent>
    </Card>
  );
};

const SentimentAnalysis = () => {
  const classes = useStyles();
  const sentimentValue = 7; // Example sentiment value
  const [totalComments, setTotalComments] = useState(18777); // Starting point of the counter
  const [startCounting, setStartCounting] = useState(false);

  useEffect(() => {
    // Start counting only once when component is mounted
    setStartCounting(true);
  }, []);
  const headlines = [
    {
      headline: "More than 200,000 international students in Canada will see their work permits expire by end of 2025",
      comments: [
        "199,999 foreigners apply for asylum in 2025",
        "Well yes, because they were TEMPORARY",
        "Bye bye",
        "Good riddance. Dont let the door hit you on the way out",
        "Tim Horton's in panic mode",
      ],
      link: "https://www.reddit.com/r/canada/comments/1fjae21/more_than_200000_international_students_in_canada/",
    },
    {
      headline: "What will Canada have to do to fix this mess",
      comments: [
        "How about we deport them? Secure the border and highly regulate the immigration system to an extreme?",
        "How about we don’t pay them. We just stick them all on a plane and send them back. Start with the ones that have a criminal record, move to the ones without jobs and finish with the rest.",
        "How about we only pay for their ticket so we can be certain they've fucked off back to where they came from?",
        "Sounds better than paying them to work at Tim Hortons",
        "I know a much cheaper option",
      ],
      link: "https://www.reddit.com/r/Canada_sub/comments/1fg237v/what_will_canada_have_to_do_to_fix_this_mess/"
    },
  ];

  return (
    <div className={classes.root}>
      <Card className={classes.mainCard}>
        <CardContent>
          <Typography variant="h4" gutterBottom align="center">
            Immigration Sentiment Analysis
          </Typography>

          {/* Continuous CountUp */}
          <Typography variant="h6" align="center" gutterBottom>
            <Tooltip title="Data collected from various social media platforms" arrow>
              <Box fontWeight="fontWeightBold" color="primary.main" sx={{ height: '40px' }}>
              <CountUp 
                start={18000} // Starting number
                end={totalComments} // Ending number
                duration={1200} 
                separator="," 
                useEasing={true} 
                decimals={0}
                delay={0}
              />+ Comments Analyzed
              </Box>
            </Tooltip>
          </Typography>

          <div className={classes.gaugeWrapper}>
            <SentimentMeter value={sentimentValue} />
          </div>

          <Typography variant="body1" paragraph align="center">
            Based on our AI-powered sentiment analysis of comments across various platforms, the current public sentiment towards immigration in Canada is {sentimentValue < 50 ? 'extremely negative' : 'relatively positive'}.
          </Typography>

          <Grid container spacing={3}>
            {headlines.map((item, index) => (
              <Grid item xs={12} md={6} key={index}>
                <HeadlineCard
                  headline={item.headline}
                  comments={item.comments}
                  link={item.link} // Pass the link prop here
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
        <Typography variant="body2" align="center" style={{ marginTop: '16px', color: '#777' }}>
          Disclaimer: The heading and set of comments here have been picked randomly from the data.
        </Typography>
      </Card>
    </div>
  );
};

export default SentimentAnalysis;


My first comment in first card takes too much space. It takes 5-6 lines of extra white space. There is no such setting or space. I tried chagning first comment, but same results. I tried playing around with CSS, same result.