Implement ShowCard component functionality and display logic

src/App.tsx

@@ -56,7 +56,12 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
-        {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/}
+        {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/
+          shows.map((show) => { 
+            return <ShowCard key={show.id} {...show} />;
+          }  )  
+
+        }
         </div>
       </main>
     </div>

src/components/showCard/ShowCard.tsx

@@ -11,62 +11,87 @@ export interface ShowCardProps {
 
 export default function ShowCard(
   /* TODO 1: Accept props with ShowCardProps type here */
+  { artist, stage, day, hour, ticketsLeft, image }: ShowCardProps
 ) {
   // TODO 2: Create state called isInterested of type boolean (default false)
   // const [isInterested, setIsInterested] = ...
 
+  const [isInterested, setIsInterested] = useState<boolean>(false);
+
   // TODO 3: Function that toggles true/false in isInterested
   // function handleToggleInterested() {}
+  function handleToggleInterested() {
+    setIsInterested(!isInterested);
+  }
 
   // TODO 4: Create ticketsStatusText (string):
   // 0 → "SOLD OUT"
   // 1–30 → "Last tickets – hurry up!"
   // >30 → "Tickets available"
-
+function getTicketsStatusText(ticketsLeft: number): string {
+    if (ticketsLeft === 0) {
+      return "SOLD OUT";
+    } else if (ticketsLeft >= 1 && ticketsLeft <= 30) {
+      return "Last tickets – hurry up!";
+    } else {
+      return "Tickets available";
+    }
+  }
   // TODO 5: Create text for interest status based on isInterested:
   // false → "You haven't added this show yet"
   // true → "This show is in your interested list 🎟️"
+function getInterestedText(isInterested: boolean): string {
+    if (isInterested) {
+      return "This show is in your interested list 🎟️" ;
+    } else {
+      return "You haven't added this show yet";
+    }
+  }
 
+
   return (
     <article className="show-card">
       <div className="show-image-wrapper">
         {/* TODO 6: Replace placeholder with real <img> from props */}
         {/* <img src={image} alt={artist} className="show-image" /> */}
-        <div className="show-image-placeholder">Image goes here</div>
+          <img src={image} alt={artist} className="show-image" />
       </div>
 
       <header className="show-header">
         <h2 className="show-artist">
           {/* TODO 7: If isInterested → show ⭐ before artist name */}
-          "Artist name here"
+          {isInterested ? "⭐ " : ""}
+          {artist}
         </h2>
         <p className="show-meta">
           {/* TODO 8: Display stage, day, hour from props */}
-          "Stage · Day · Hour"
+          {stage} · {day} · {hour}
         </p>
       </header>
 
       <section className="show-info">
         <p className="tickets-status">
           {/* TODO 9: Display the ticketsStatusText */}
-          "Tickets status text"
+          {getTicketsStatusText(ticketsLeft)}
         </p>
 
         <p className="interested-status">
           {/* TODO 10: Display the interestedText */}
-          "Interested status text"
+          {getInterestedText(isInterested)}
         </p>
       </section>
 
       <button
         className="interested-button"
-        // TODO 11: Connect onClick to handleToggleInterested function
+      // TODO 11: Connect onClick to handleToggleInterested function
+        onClick={handleToggleInterested}
       >
         {/* TODO 12: Button text:
             false → "Mark as interested"
             true  → "Remove from my list"
         */}
-        "Button text"
+        {isInterested ? "Remove from my list" : "Mark as interested"}
+
       </button>
     </article>
   );