"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-[28px] text-center md:text-start">
                Why Choose Fruxinfo Pvt Ltd. for Your SEO Needs?
            </h3>
            <div className="mt-5">
              <Image src="/images/seo_plan_img.webp" className="w-[70%] mx-auto" width={1200} height={600} alt="SEO planning illustration — Fruxinfo"/>
            </div>
          </div>
          <div className="sm:col-span-7">
            <Accordion transition transitionTimeout={200}>
              <AccordionItem header="1. Proven Track Record" initialEntered>
                With years of experience in the industry, we have established a strong track record of helping businesses achieve their SEO goals. Our team of skilled professionals stays up to date with the latest trends and techniques to ensure your website stays ahead of the competition.
              </AccordionItem>
              <AccordionItem header="2. Customized Strategies">
                We understand that every business is unique, and that is why we create personalized SEO strategies tailored specifically to your goals, target audience, and industry. Whether you need local SEO, e-commerce SEO, or enterprise-level optimization, we have the expertise to deliver outstanding results.
              </AccordionItem>
              <AccordionItem header="3. Comprehensive SEO Services">
                Our range of SEO services covers all aspects of website optimization, including keyword research, on-page optimization, technical SEO, link building, content marketing, and more. We do everything in our power to maximize your online presence and increase organic traffic to your website.
              </AccordionItem>
              <AccordionItem header="4. Transparent Reporting">
                At Fruxinfo Pvt Ltd., we believe in complete transparency. We provide regular reports that detail the progress of your SEO campaign, including keyword rankings, traffic metrics, and conversion rates. Our comprehensive reporting allows you to track the impact of our services and make informed decisions for your business.
              </AccordionItem>
              <AccordionItem header="5. Dedicated Support">
                Your success is our top priority. When you partner with us, you gain access to a dedicated team of SEO experts who are committed to your satisfaction. We are always available to answer your questions, address your concerns, and provide proactive recommendations to enhance your online presence.
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WebDesignAccordion;