"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="py-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-[32px] text-center md:text-start">
              5 Advantages of an <br /> Eye-Catching{" "}
              <span className="text-[#E77025]">Website Design</span>
            </h3>
            <div className="mt-5">
              <Image src="/images/custome_drow_design.webp" className="w-full" width={1200} height={600} alt="Custom website design illustration — Fruxinfo"/>
            </div>
          </div>
          <div className="sm:col-span-7">
            <Accordion transition transitionTimeout={200}>
              <AccordionItem header="1. Enhances Footfall of Clients" initialEntered>
                An attractive website design increases the potential of your business.
                It attracts users, increasing traffic at the portal. When you have
                more visitors, your business goals are met successfully.
              </AccordionItem>
              <AccordionItem header="2. Maintains Uniqueness">
                Uniqueness is something that we all want. Our approach of website design in Ahmedabad maintains the same. Our creative team works behind the scenes and gives their best to deliver an exceptional UI designing for your website.
              </AccordionItem>
              <AccordionItem header="3. Helps SEO Process">
                We all know, SEO (Search Engine Optimization) is the integrated part of a website. If you have a website and it does not appear in the ranking, there is no benefit to it. Hence SEO is being done. Technically, a user-friendly design of a website helps improve the position of a website across various search engines like Google, Yahoo, Bing etc...
              </AccordionItem>
              <AccordionItem header="4. More Business Awareness">
                Awareness is the main concern for the startups and entrepreneurs who put lots of effort for the same. And when you have engaging and dynamic website design, you get users’ impressions automatically. Hence if you are a start up and looking for awesome website design in Ahmedabad, contact us now. We have a team of experts who understands your vision and delivers your expectations.
              </AccordionItem>
              <AccordionItem header="5. Overall Business Growth">
                An attractive web designing enhances the overall appearance and visibility of your website. As a result, your sales increase and ultimately the business. So guys, do not compromise with the website designing services in Ahmedabad because Fruxinfo is right there. Simply contact us and then will take everything forward. We hope to receive your queries.
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WebDesignAccordion;