"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-[32px] text-center md:text-start">
                Be Vigilant While You Choose 
              <span className="text-[#E77025]">Graphic Designer</span>
            </h3>
            <p className="text-[16px] mt-3 text-[#5D5D5D]">Finding a talented graphic designer is a difficult task in and of itself. You must exercise extreme caution. You can look for a graphic designer online or ask your friends or family for recommendations. There are so many graphic designers to choose from on the internet. Keep the following information in mind before making your decision:</p>
            <div className="mt-5 px-5">
              <Image src="/images/graphics_design_tools_dog.webp" className="w-full" width={1200} height={600} alt="Graphic design tools illustration — Fruxinfo"/>
            </div>
          </div>
          <div className="sm:col-span-7">
            <Accordion transition transitionTimeout={200}>
              <AccordionItem header="1. Must be familiar with various new technologies" initialEntered>
                Graphic design is a broad field that necessitates extensive knowledge of emerging technologies. For flawless results, all design and technical aspects must be perfectly clear in the designer is mind.
              </AccordionItem>
              <AccordionItem header="2. Examine their previous performance">
                To make a more informed decision, read the designer is reviews, testimonials, and ratings from current or previous clients. This will assist you in evaluating their services & past performance.
              </AccordionItem>
              <AccordionItem header="3. Examine their portfolio">
                It is the best way to evaluate the designer is work quality. You can look at their previous work and assess their ability to perform. This will allow you to determine whether the designer is capable of meeting your requirements.
              </AccordionItem>
              <AccordionItem header="4. Marketing knowledge">
                A good graphic design explains the customer profile and speaks to the target market on behalf of the company. Graphic designs must be able to communicate loud and clear messages about the company is sales, profits, and other pertinent information.
              </AccordionItem>
              <AccordionItem header="5. Inquire about their estimated time frame for completing the project">
                It will help you determine their efficiency and level of commitment. Some designers brag about their timescales but are never able to achieve their deadlines.
              </AccordionItem>
              <AccordionItem header="6. Try comparing their costs and services">
                It is necessary to examine and contrast the services and prices of several graphic designers. Ascertain that the technology required to create a perfect graphic for your website is available.
                <br />
                People nowadays are looking for the latest Graphic Design Ahmedabad. To accommodate their requirements, a manufacturer must deliver his product through appropriate and impressive advertising and publicity. Where can I find such inventive advertising? Graphic designs are the only source. A wise man will outsource all of his graphic designs and sit back and relax, not worrying about labour issues, salary factors and other concerns. There are numerous global opportunities for graphic design outsourcing to meet the large number of possibilities in this field. Viewers prefer outsourcing films with creativity in the film industry. On the internet, we can see that many companies are opting to take contracts for graphic design outsourcing.
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WebDesignAccordion;