"use client"

import * as React from "react"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@/components/ui/carousel" 
import { CCCItems } from '@/data'
const CCCarousel = () => {
  return (
    <section  id="cssarousel">
    <div className="relative w-full max-w-5xl mx-auto py-20"> 
    <h1 className="heading">
        My Core Competency {" "}
        <span className="text-purple">Map</span>
      </h1>

    <Carousel>
      <CarouselContent className="space-x-4 p-4 gap-16 mt-10">
        {CCCItems.map
        (({id, title, img, reflection}) =>
        <CarouselItem>
            <div className="flex space-x-8 items-center"> 
            <div className="flex-shrink-0 w-64 h-64">
              <img
                src={img}
                alt={img}
                className="w-full h-full object-cover rounded-lg"
              />
            </div>
            <div className="flex-grow">
              <h3 className="text-xl font-semibold mb-4">{title}</h3>
              <p className="text-base text-neutral-50">
               {reflection}
              </p>
            </div>
          </div>
        </CarouselItem>
        )}

      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
    <h3 className="text-center text-xl font-semibold mb-4">Core Compentency Reflection</h3>
    <p className="text-lg text-neutral-50 mb-6">
    When I looked at my Learning Map, I noticed a few things about myself. I enjoy working collaboratively with others and helping out when I can. I am good at self-motivation, especially when it comes to something I enjoy or a challenge I set for myself. I tend to think things through very well before I act. My strongest core competency is gathering diverse evidence from a variety of perspectives before making a decision. I am very level-headed and often take time to think things over; I don’t impulse buy or make risky decisions on the fly. On the other hand, my weakest core competency is thinking outside the box to solve problems. While I may think a lot before making decisions, once my mind is set, it's often hard to persuade me to change it or consider a different angle.
    </p>
  </div>
  </section>
  )
}

export default CCCarousel