"use client";
import React from "react";

import Container from "../shared/container";
import AchievemetsSlider from "./slider/AchievemetsSlider";
interface Image {
  id: number;
  file_name: string;
  original_url: string;
  extension: string;
  size: number;
}

export interface ItemSlider {
  id: number;
  title: string;
  image: Image;
}

const Achievements = ({
  locale,
  achievements,
}: {
  locale: string;
  achievements: any;
}) => {
  return (
    <div data-aos="fade-up" data-aos-delay={100} data-aos-duration="800">
      <Container>
        <div className="flex  flex-col gap-8">
          <div className="flex  flex-col gap-4">
            {/* @ts-ignore */}
            {achievements?.header?.title && (
              <h6 className="text-[32px]">{achievements?.header?.title}</h6>
            )}
            {achievements?.header?.description && (
              <p className="text-paragText text-[20px]">
                {/* @ts-ignore */}
                {achievements?.header?.description}
              </p>
            )}
          </div>
          {/* @ts-ignore */}
          {achievements?.data && (
            <AchievemetsSlider data={achievements?.data} />
          )}
        </div>
      </Container>
    </div>
  );
};

export default Achievements;