import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import Image from "next/image";

export function StoryOne() {
  return (
    <>
      <ul className="text-lx md:text-2xl font-medium text-gray-900">
        <li>
         {Texts.story_text1}
        </li>
        <li className="mt-8">
        {Texts.story_text2}
        </li>
        <li className="mt-8">
        {Texts.story_text3}
        </li>
        <li className="mt-8">
        {Texts.story_text4}
        </li>
      </ul>
      <button
        type="button"
        className="bg-black mt-16 max-w-fit h-16 text-white focus:ring-4 focus:outline-none font-medium rounded-full text-xl px-5 py-2.5 text-center inline-flex items-center justify-center"
      >
        {Texts.join_club}
        <Image 
          src={ImagePath.circle_arrow} 
          alt="Circle Arrow"
          width={36}  // Adjust based on your design needs
          height={36} // Adjust based on your design needs
          className="ml-6 arrow"
        />
      </button>
    </>
  );
}