'use client';

import Heading from '../../../app/components/atoms/Heading';
import Paragraph from '../../../app/components/atoms/Paragraph';
import UniversityDetailForm from '../../../app/components/molecules/UniversityDetailForm';
import UniversityCard from '../../../app/components/atoms/UniversityCard';
import UniversityCourses from './UniversityCourses';
import TextDisplay from '../clientcomponents/TextDisplay';
import UniversityDescriptionTabs from './UniversityDescriptionTabs';
import { Building } from 'lucide-react';

const UniversityOverview = ({ university, courses, subjectsData, relatedUniversities }) => {
  const gradientStyle = {
    background: 'linear-gradient(135deg, #0B6F78 0%, #0a306b 100%)',
  };

  return (
    <div className="space-y-8">
      <TextDisplay 
        content={university.short_description} 
        className="sn-content"
      />
      
      {/* University Detail Form */}
      <UniversityDetailForm university={university} />

      {/* Courses Section - Displayed directly below university details */}
      <section className="py-12">
        <div className="max-w-7xl mx-auto">
          <UniversityCourses 
            university={university} 
            initialCourses={courses || []}
            subjectsData={subjectsData || { data: [] }}
          />
        </div>
      </section>

      <UniversityDescriptionTabs 
        descriptions={{
          overview: university.overview,
          academic_programs: university.academic_programs, // Your academic programs content
          scholarships_financial: university.scholarships_financial_support, // Your scholarship content
          campus_life: university.campus_life_student_experience, // Your campus life content
          why_choose: university.why_choose // Your why choose content
        }}
      />

      {/* Related Universities Section */}
        <div className="mt-16">
          <div className="bg-gradient-to-r from-teal-600 to-blue-500 rounded-2xl p-8 text-center text-white mb-12 shadow-xl">
            <div className="flex items-center justify-center gap-3 mb-4">
              <Building className="w-8 h-8 text-white/90" />
              <h3 className="text-2xl font-bold">Explore Similar Institutions</h3>
            </div>
            <p className="text-blue-100/90 max-w-2xl mx-auto">
              Discover other top-rated universities that match your academic interests and preferences
            </p>
          </div>
          
          {relatedUniversities && relatedUniversities.length > 0 ? (
            <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8">
              {relatedUniversities.map(uni => (
                <div key={uni.id} className="transform hover:scale-[1.02] transition-transform duration-500">
                  <UniversityCard 
                    name={uni.name} 
                    logo={uni.logo} 
                    slug={uni.slug} 
                    id={uni.id}
                    founded_in={uni.founded_in}
                    ranking={uni.ranking}
                    languages={uni.languages}
                    intake={uni.intake}
                    accommodation={uni.accommodation}
                    scholarship={uni.scholarship}
                  />
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-16 bg-gradient-to-br from-gray-50 to-white rounded-2xl border border-gray-200">
              <div className="inline-flex p-4 rounded-2xl bg-gradient-to-r from-teal-50 to-blue-50 mb-4">
                <Building className="w-12 h-12 text-teal-600" />
              </div>
              <p className="text-lg text-gray-600 font-medium mb-2">
                No related universities found.
              </p>
              <p className="text-gray-500 text-sm">
                Try searching for universities in different categories
              </p>
            </div>
          )}
      </div>
    </div>
  );
};

export default UniversityOverview;