developer-roadmap/src/components/SQLCourseVariant/CourseFeatures.tsx

import {
  BookIcon,
  BrainIcon,
  ClipboardIcon,
  CodeIcon,
  FileCheckIcon,
  FileQuestionIcon,
  MinusIcon,
  PlusIcon,
} from 'lucide-react';
import { SectionHeader } from './SectionHeader';
import { useState } from 'react';
import { cn } from '../../lib/classname';

type Feature = {
  title: string;
  description: string;
  icon: React.ElementType;
  imgUrl: string;
};

export function CourseFeatures() {
  const features: Feature[] = [
    {
      title: 'AI Tutor',
      description:
        'Powerful AI tutor to help you with your queries, provide additional explanations and help if you get stuck.',
      icon: BrainIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/ai-integration.png',
    },
    {
      title: 'Real-world Challenges',
      description:
        'The course is packed with practical challenges and quizzes, allowing you to test your knowledge and skills.',
      icon: FileQuestionIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/coding-challenges.png',
    },
    {
      title: 'Coding Environment',
      description:
        'With the integrated IDE, you can practice your SQL queries in real-time, getting instant feedback on your results.',
      icon: CodeIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/coding-environment.png',
    },
    {
      title: 'Textual Course',
      description:
        'Unlike video-based courses where you have to learn at the pace of the instructor, this course is text-based, allowing you to learn at your own pace.',
      icon: BookIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/textual-course.png',
    },
    {
      title: 'Take Notes',
      description:
        'The course allows you to take notes, where you can write down your thoughts and ideas. You can visit them later to review your progress.',
      icon: ClipboardIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/course-notes.png',
    },
    {
      title: 'Completion Certificate',
      description:
        'The course provides a completion certificate, which you can share with your potential employers.',
      icon: FileCheckIcon,
      imgUrl: 'https://assets.roadmap.sh/guest/course-certificate.jpg',
    },
  ];

  return (
    <div>
      <SectionHeader
        title="Not your average SQL course"
        description="Built around a text-based interactive approach and packed with practical challenges, this comprehensive SQL bootcamp stands out with features that make it truly unique."
      />

      <div className="mx-auto mt-10 w-full max-w-3xl divide-y divide-zinc-800 overflow-hidden rounded-xl border border-zinc-800">
        {features.map((feature, index) => (
          <CourseFeature
            key={feature.title}
            {...feature}
            isExpanded={index === 0}
          />
        ))}
      </div>
    </div>
  );
}

type CourseFeatureProps = Feature & {
  isExpanded?: boolean;
};

function CourseFeature(props: CourseFeatureProps) {
  const {
    title,
    description,
    icon: Icon,
    imgUrl,
    isExpanded: isDefaultExpanded = false,
  } = props;

  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);

  return (
    <div>
      <div className="flex items-center justify-between gap-2 px-5 py-3">
        <div className="flex items-center gap-2">
          <Icon className="h-5 w-5 shrink-0 text-yellow-600" />
          <h3 className={cn('text-lg', isExpanded && 'text-zinc-200')}>
            {title}
          </h3>
        </div>

        <button
          className="text-zinc-400 hover:text-zinc-300"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          {isExpanded ? (
            <MinusIcon className="h-5 w-5" />
          ) : (
            <PlusIcon className="h-5 w-5" />
          )}
        </button>
      </div>

      {isExpanded && (
        <div className="grid grid-cols-2 gap-4 px-5 py-3">
          <p className="text-lg text-balance text-white">{description}</p>
          <img src={imgUrl} alt={title} className="h-full w-full rounded-lg" />
        </div>
      )}
    </div>
  );
}