"use client";

import { useState } from "react";
import Image from "next/image";
import { aiToolIcons } from "../../data/home/aitools";

export default function AITools() {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchQuery("");
  };

  return (
    <section className="tools-sec">
      <div className="carousel-container">
        <div className="tools-content space">
          <div className="sec-title">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="300"
            >
              Sasico AI Tools
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              Intelligent Search
            </h2>
            <p data-aos="fade-up" data-aos-duration="700" data-aos-delay="300">
              Harness the power of AI-driven search functionality that
              understands context, intent, and user behavior. Our intelligent
              search system goes beyond basic keyword
            </p>
          </div>
          <form
            className="tools-form"
            data-aos="zoom-in"
            data-aos-duration="900"
            data-aos-delay="300"
            onSubmit={handleSubmit}
          >
            <div className="form-group">
              <label>
                <Image
                  src={aiToolIcons[0].src}
                  alt={aiToolIcons[0].alt}
                  width={20}
                  height={20}
                />
              </label>
              <input
                type="text"
                placeholder="Total Leads in June 2025"
                required
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <button type="submit">
                <Image
                  src={aiToolIcons[1].src}
                  alt={aiToolIcons[1].alt}
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}