"use client";

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

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="grid sm:grid-cols-12 gap-5">
          <div className="sm:col-span-5">
            <h3 className="text-[20px] md:text-[28px] text-center md:text-start">
                An Awesome and Complete Solution of <span className="text-[#E77025]">Web Development</span> which Consist Following Services
            </h3>
            <div className="mt-5">
              <Image src="/images/web_development_coffie_cup.webp" className="w-[45%] mx-auto" width={1200} height={600} alt="Web development workspace illustration — Fruxinfo"/>
            </div>
          </div>
          <div className="sm:col-span-7">
            <Accordion transition transitionTimeout={200}>
              <AccordionItem header="1. Customized Web Development" initialEntered>
                With the most dynamic services of website development, we assist the clients to develop the customized websites. The procedure of Web development Ahmedabad starts with proper research where the feasibility of the client is requirement is cross checked. Once this feasibility check is completed, we will share the locked requirement. Then the team helps to create different prototypes and also shares with the clients. After this changes will be done and will definitely make it better.
              </AccordionItem>
              <AccordionItem header="2. Quality Testing">
                Our specified quality testing team performs end to end testing and ensures zero bugs. We always ensure to deliver high quality products and so we perform beta and alpha testing to confirm high quality performance. Hire Fruxinfo Pvt Ltd. Now for all your web development needs!
              </AccordionItem>
              <AccordionItem header="3. Maintenance & Support">
                Fruxinfo Pvt Ltd. offers incredible support service and maintenance. We understand that web applications require constant support subsequent to deployment. If required, we also maintain the product and ensure there is no disaster. We take routines and regular backup for maintaining the data of the customer.
                <br />
                While providing web development Ahmedabad services, our team ensures that the website is interactive and interesting. Connect with us now and take your Business to new Heights!
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WebDesignAccordion;