'use client'
import React from "react";
import { useParams } from "next/navigation";
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 default function TeamDetails() {
    const { slug } = useParams();
    const member = teamMembers.find((item) => item.slug === 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="Team Details">
                <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.image} 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>

                                {/* Appointment Form */}
                                <div className="col-lg-6 col-md-6 col-sm-12 appointment-column">
                                    <div className="appointment-inner">
                                        <h2>Book An Appointment</h2>
                                        <form method="post" action="#" className="default-form">
                                            <div className="row clearfix">
                                                <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                                                    <input type="text" name="fname" placeholder="First Name" required />
                                                </div>
                                                <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                                                    <input type="text" name="phone" placeholder="Phone Number" required />
                                                </div>
                                                <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                                                    <input type="email" name="email" placeholder="Email" required />
                                                </div>
                                                <div className="col-lg-6 col-md-6 col-sm-12 form-group">
                                                    <input type="text" name="subject" placeholder="Subject" required />
                                                </div>
                                                <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                                                    <textarea name="message" placeholder="Message"></textarea>
                                                </div>
                                                <div className="col-lg-12 col-md-12 col-sm-12 form-group message-btn">
                                                    <button type="submit" className="theme-btn btn-one"><span>Send Message</span></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}