"use client";

import React from "react";
import { Accordion, AccordionItem as Item } from "@szhsin/react-accordion";
import { FaChevronDown } from "react-icons/fa";

interface AccordionItemProps {
  header: string;
  isEnter?: boolean;
}

const AccordionItem: React.FC<AccordionItemProps & Record<string, unknown>> = ({ header, ...rest }) => (
  <Item
    {...rest}
    header={({ state }: { state: { isEnter: boolean } }) => (
      <div className="flex items-center w-full">
        {header}
        <FaChevronDown
          className={`ml-auto transition-transform duration-200 ease-out ${
            state.isEnter ? "rotate-180" : ""
          }`}
        />
      </div>
    )}
    className="border-[2px] border-[#E77025] rounded-[10px] overflow-hidden my-4"
    buttonProps={{
      className: ({ isEnter }: { isEnter: boolean }) =>
        `flex w-full text-[18px] md:text-[20px] text-[#000] p-4 text-left hover:bg-slate-100 ${
          isEnter ? "" : ""
        }`
    }}
    contentProps={{
      className: "transition-height duration-200 ease-out"
    }}
    panelProps={{ className: "p-4" }}
  />
);

const WebDesignAccordion = () => {
  return (
    <div className="pt-14 md:pt-0 pb-20">
      <div className="max-w-[1200px] mx-auto px-3">
        <div className="flex justify-center">
          <div className="w-full md:w-[70%]">
            <h3 className="text-[20px] md:text-[28px] w-full md:w-[60%] m-auto text-center">
                5 Scenarios that Allow for The Immediate Engagement of Skilled
            </h3>
            <Accordion transition transitionTimeout={200}>
              <AccordionItem header="1. Stay Ahead of Competitors with a Modernized Website" initialEntered>
                You may wish to function and appear better than your competitor. To ensure this, your webpage or website must be effectively modernized in order to keep up with changing trends. This will make it easy to present your brand, service and products.
              </AccordionItem>
              <AccordionItem header="2. Expand Your Reach with the Growing Influence of Social Medias">
                With the increasing expansion and influence of social media, it is practical and sensible to supplement the stream and use media.
              </AccordionItem>
              <AccordionItem header="3. Boost Customer Awareness and Expand Market Share">
                Increasing customer awareness, engaging them and expanding market share are all possible as a result of this.
              </AccordionItem>
              <AccordionItem header="4. Optimize Your Website for Higher Search Engine Rankings">
                You can properly optimize your company&apos;s website so that it ranks high in the major search engines. This is a distinct advantage that a qualified agency may provide.
              </AccordionItem>
              <AccordionItem header="5. Strengthen Brand Credibility with a Professional Website">
                A well-designed, professional website helps build trust and credibility among customers. It showcases your expertise, reliability, and commitment to quality, making your brand stand out in the competitive market.
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WebDesignAccordion;