1  import React, { useEffect, useState } from 'react';
 2  import { Button } from "@/components/ui/button";
 3  import Microlink from "@microlink/react";
 4  // import { db } from '../lib/firebase'; // Adjust this import according to your Firebase config setup
 5  // import { doc, updateDoc } from 'firebase/firestore';
 6  
 7  function PersonCard({ id, time, socials, updatePersonDoc, linkedinSummary, linkedinSummaryAudio, latestQuestion, imageURL }) {
 8    const [_linkedinSummary, setLinkedinSummary] = useState(linkedinSummary || '');
 9    const [_linkedinSummaryAudio, setLinkedinSummaryAudio] = useState(linkedinSummaryAudio || '');
10    const [_latestQuestion, setLatestQuestion] = useState(latestQuestion || '');
11    const [loading, setLoading] = useState(false);
12    const [question, setQuestion] = useState('How would you describe this person in summary?');
13    const onQuestionChange = (e) => {
14      setQuestion(e.target.value);
15    };
16  
17    const getLinkedinSummary = async () => {
18      console.log('Getting linkedin summary');
19      setLoading(true);
20  
21      fetch('/api/summary', {
22        method: 'POST',
23        headers: {
24          'Content-Type': 'application/json',
25        },
26        body: JSON.stringify({
27          socials: socials,
28          question: question
29        }),
30      })
31        .then(response => response.json())
32        .then(data => {
33          try {
34          updatePersonDoc(id, {
35              linkedinSummary: data.linkedinSummary.summary,
36              linkedinSummaryAudio: data.linkedinSummary.audio,
37              latestQuestion: question
38              });
39          } catch (error) {
40            console.error('Error updating document:', error);
41          }
42  
43          setLinkedinSummary(data.linkedinSummary.summary);
44          setLinkedinSummaryAudio(data.linkedinSummary.audio);
45          // setLatestQuestion(question);
46          setLoading(false);
47        })
48        .catch((error) => {
49          console.error('Error:', error);
50          setLoading(false);
51        });
52    };
53  
54    // useEffect(() => {
55    //   if (!_linkedinSummary) {
56    //     getLinkedinSummary();
57    //   }
58    // }, []);
59  
60    return (
61      <div className="bg-black h-full h-80 mb-10 mt-10 p-6 flex flex-col gap-8">
62        <img src={imageURL} alt="Person" className="w-20 h-20 object-cover rounded-lg mx-auto" />
63        <h1 className="text-lg md:text-7xl font-normal pb-4 text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-300 rounded-md">Your scan ⤵</h1>
64        <div className="flex flex-wrap justify-center items-start">
65          {socials.slice(0, 6).map((social, index) => (
66            <Button key={index} className="h-full w-1/4 rounded-full ml-4 mt-4 relative" size="icon" variant="ghost">
67              <span className={`absolute top-2 left-2 rounded-full p-3 z-10 ${social.score >= 85 ? 'bg-green-200' : 'bg-orange-200 '}`}>
68                <p className="text-sm font-bold">{social.score}</p>
69              </span>
70              <div className="w-full max-h-80 overflow-y-scroll">
71                <Microlink size="large" url={social.url}  api-key="muMD5YUHis3IZiVQiBNTa2mzESIPqVTy7uAKWs7w" apiKey="muMD5YUHis3IZiVQiBNTa2mzESIPqVTy7uAKWs7w" />
72                <span><a className="text-white" href={social.url}>{social.url}</a></span>
73              </div>
74            </Button>
75          ))}
76        </div>
77        {false && <p className="text-xs md:text-xl font-normal text-center text-neutral-400 mt-4 max-w-lg mx-auto">Generating summary about person...</p>}
78  
79        {latestQuestion && <p className="text-xs md:text-xl font-normal text-center text-neutral-400 mt-4 max-w-lg mx-auto">Summary about person:</p>}
80        {linkedinSummary && <p className="text-white">{linkedinSummary}</p>}
81        {linkedinSummaryAudio && (
82          <audio controls>
83            <source src={linkedinSummaryAudio} type="audio/mpeg" />
84            Your browser does not support the audio element.
85          </audio>
86        )}
87      </div>
88    );
89  }
90  
91  export default PersonCard;