import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import shared from '../../styles/Shared.module.scss';
import styles from '../../styles/Performer.module.scss';
import PerformersData from '../../data/performers/2025';
import Performer from '../../types/Performer';

const PerformerPage = () => {
  const { id } = useParams<{ id: string }>();

  const [performer, setPerformer] = useState<Performer>({
    name: '',
    paragraphs: [],
    id: '',
  });

  useEffect(() => {
    setPerformer(
      PerformersData.find((p) => p.id === id) ?? {
        name: '',
        paragraphs: [],
        id: '',
      }
    );
  }, [id]);

  return performer.name === '' ? (
    <div>Esiintyjää tunnisteella {id} ei löydy.</div>
  ) : (
    <div className={styles.performerContainer}>
      <img
        className={styles.performerImage}
        src={'/performers/2025/' + performer.id + '.jpg'}
        width={300}
        height={300}
        loading="lazy"
        alt={performer.name}
      />
      <h2>{performer.name}</h2>
      <div>
        {performer.paragraphs.map((parag, index) => (
          <p key={index}>{parag.toString()}</p>
        ))}
      </div>
    </div>
  );
};

export default PerformerPage;
