import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { notFound } from "next/navigation";
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 default function TeamDetails({ params }) {
  const member = teamMembers.find((item) => item.slug === params.slug);

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

  return (
    <Layout
      headerStyle={2}
      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-5 col-md-12 col-sm-12 image-column">
                <figure className="image-box mr_15">
                  <img src={member.imageDetail} alt={member.name} />
                </figure>
              </div>
              <div className="col-lg-7 col-md-12 col-sm-12 content-column">
                <div className="content-box">
                  <h2>{member.name}</h2>
                  <span className="designation">{member.designation}</span>
                  <p>{member.description}</p>
                  <ul className="info-list mb_30 clearfix">
                    <li><strong>Experience: </strong>{member.experience}</li>
                    <li><strong>Email: </strong><Link href={`mailto:${member.email}`}>{member.email}</Link></li>
                    <li><strong>Phone: </strong><Link href={`tel:${member.phone}`}>{member.phone}</Link></li>
                  </ul>
                  <ul className="social-links clearfix">
                    {member.socials.map((social, idx) => (
                      <li key={idx}>
                        <Link href={social.link}>
                          <i className={social.icon}></i>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>

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

          {/* Expertise & Skills */}
          <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>
  );
}