import { Award, Star } from "lucide-react";

const KRISH_IMAGE = "/uploads/images/krish.png";

type InstructorData = {
    image?: string;
    name: string;
    role?: string;
    title?: string;
    rating?: string | number;
    ratingText?: string;
    students: string;
    linkedin: string;
    linkedinLabel?: string;
    paragraphs: string[];
    focusTitle?: string;
    credentialTitle?: string;
    focusItems?: string[];
    credentials?: string[];
};

export default function InstructorSection({ data }: { data: InstructorData }) {
    const imageSrc = data.image?.trim() || KRISH_IMAGE;
    const role = data.role ?? data.title ?? "";
    const rating = data.ratingText ?? String(data.rating ?? "");
    const linkedinLabel = data.linkedinLabel ?? "View LinkedIn";
    const focusTitle = data.focusTitle ?? data.credentialTitle ?? "";
    const focusItems = data.focusItems ?? data.credentials ?? [];

    return (
        <section id="instructor" className="py-20 border-t border-[#E6D3B1]/30">
            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div data-static-border="true" data-instructor-card="true" className="p-6 md:p-10 rounded-3xl bg-white border-2 border-[#E6D3B1]/40 shadow-xl cv-reveal cv-in-view">
                    <div className="flex flex-col md:flex-row gap-8 items-start">
                        <div className="flex-shrink-0">
                            <img
                                src={imageSrc}
                                alt={data.name}
                                className="w-48 h-48 rounded-2xl border-4 border-[#D4AF37] shadow-xl object-cover"
                            />

                            <div className="mt-4 space-y-3">
                                <div className="flex items-center gap-2">
                                    <div className="flex gap-1">
                                        {Array.from({ length: 5 }).map((_, index) => (
                                            <Star
                                                key={index}
                                                className="w-4 h-4 fill-[#D4AF37] text-[#D4AF37]"
                                            />
                                        ))}
                                    </div>
                                    <span className="text-sm font-bold text-[#4A141E]">
                                        {rating}
                                    </span>
                                </div>

                                <p className="text-sm text-[#4A141E]/70">{data.students}</p>

                                <a
                                    href={data.linkedin}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-[#0A66C2] text-white font-bold text-sm shadow-lg hover:bg-[#084f98] transition-colors"
                                >
                                    <span className="font-black">in</span>
                                    <span>{linkedinLabel}</span>
                                </a>
                            </div>
                        </div>

                        <div className="flex-1">
                            <div className="flex flex-wrap items-center gap-3 mb-2">
                                <h3 className="text-2xl md:text-3xl font-black text-[#4A141E]">
                                    {data.name}
                                </h3>

                                <a
                                    href={data.linkedin}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-[#0A66C2] text-white shadow-md hover:bg-[#084f98] transition-colors"
                                    aria-label="View LinkedIn profile"
                                >
                                    <span className="font-black">in</span>
                                </a>
                            </div>

                            <p className="text-base md:text-lg text-[#8B1C1C] font-bold mb-6">
                                {role}
                            </p>

                            <div className="prose prose-lg max-w-none text-[#4A141E]/80 leading-relaxed space-y-4">
                                {data.paragraphs.map((paragraph, index) => (
                                    <p key={index}>{paragraph}</p>
                                ))}

                                <div className="mt-6 pt-6 border-t-2 border-[#E6D3B1]/30">
                                    <h4 className="font-black text-[#4A141E] mb-3">
                                        {focusTitle}
                                    </h4>

                                    <div className="grid md:grid-cols-2 gap-3">
                                        {focusItems.map((item) => (
                                            <div key={item} className="flex items-center gap-2">
                                                <Award className="w-4 h-4 text-[#D4AF37]" />
                                                <span className="text-sm">{item}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}