import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { teamMembers } from "@/utils/constant.utils";

const ProgressBar = ({ label, percent }) => (
  <div className="progress-box">
    <p>{label}</p>
    <div className="bar">
      <div className="bar-inner count-bar" style={{ width: `${percent}%` }}></div>
      <div className="count-text">{`${percent}%`}</div>
    </div>
  </div>
);

export async function generateStaticParams() {
  return teamMembers.map((member) => ({
    slug: member.slug,
  }));
}

export async function generateMetadata({ params }) {
  const member = teamMembers.find((item) => item.slug === params.slug);

  if (!member) {
    return {
      title: "Team Member Not Found – Rapharehab Clinic",
      description: "Team member not found at Rapharehab Clinic.",
    };
  }

  return {
    title: member.metaTitle || `${member.name} – Rapharehab Clinic`,
    description: member.metaDis || `Learn more about ${member.name}, their experience, expertise, and services at Rapharehab Clinic in Etobicoke and Scarborough.`,
  };
}

export default function TeamDetails({ params }) {
  const member = teamMembers.find((item) => item.slug === params.slug);

  if (!member) {
    return (
      <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Not Found">
        <div className="auto-container">
          <h2>Team member not found!</h2>
          <Link href="/" className="theme-btn btn-one" aria-label="Go back">Go Back</Link>
        </div>
      </Layout>
    );
  }

  return (
    <Layout
      headerStyle={1}
      footerStyle={1}
      breadcrumbTitle={member.name}
      bannerImage={member.bannerImage}
    >
      <section className="team-details sec-pad-2">
        <div className="auto-container">
          <div className="team-details-content mb_50">
            <div className="row clearfix">
              <div className="col-lg-4 col-md-6 col-sm-12 image-column">
                <figure className="image-box mr_15">
                  <img src={member.imageDetail} alt={member.name} loading="lazy" />
                </figure>
              </div>
              <div className="col-lg-8 col-md-6 col-sm-12 content-column">
                <div className="content-box">
                  <h2>{member.name}</h2>
                  <span className="designation">{member.designation}</span>
                  <p
                    dangerouslySetInnerHTML={{ __html: member.description }}
                  />
                  <ul className="info-list mb_30 clearfix">
                    <li><strong>Experience: </strong>{member.experience}</li>
                    <li><strong>Email: </strong><Link href={`mailto:${member.email}`} aria-label="Email">{member.email}</Link></li>
                    <li><strong>Phone: </strong><Link href={`tel:${member.phone}`} aria-label="Phone">{member.phone}</Link></li>
                  </ul>
                  <ul className="social-links clearfix">
                    {member.socials.map((social, idx) => (
                      <li key={idx}>
                        <Link href={social.link} aria-label="Social links">
                          <i className={social.icon}></i>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div className="experience-details mb_50">
            <h2>Personal Experience</h2>
            <p
              dangerouslySetInnerHTML={{ __html: member.about1 }}
            />
            <p
              dangerouslySetInnerHTML={{ __html: member.about2 }}
            />
          </div>

          <div className="two-column">
            <div className="row clearfix">
              <div className="col-lg-6 col-md-6 col-sm-12 skills-column">
                <div className="skills-box">
                  <div className="text-box mb_30">
                    <h2>Expertise & Skills</h2>
                    <p>Professional expertise and top-level skills demonstrated below:</p>
                  </div>
                  <div className="progress-inner">
                    {member.skills.map((skill, index) => (
                      <ProgressBar key={index} label={skill.label} percent={skill.percent} />
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>
    </Layout>
  );
}