import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image"; // ✅ MISSING IMPORT
import Heading from "@/components/Heading";
const exploreData = [
  {
    id: 1,
    image: "/image/explore/01.png",
    name: "ABS",
    slug: "abs",
  },
  {
    id: 2,
    image: "/image/explore/02.png",
    name: "Laminate",
    slug: "laminate",
  },
];

const Explore = () => {
  return (
    <section className="explore-section">
      <Container className="custom_container">
        <Row className="text-center justify-content-center">
          <Col md={8}>
            <Heading el="h2" heading="Explore Our Crafted Products" />
          </Col>
        </Row>
        <Row>
          {exploreData.map((item) => (
            <Col md={6} key={item.id}>
              <div className="collections-item">
                <Link href={`/collections/${item.slug}`} className="d-block">
                  <Image
                    src={item.image}
                    width={868}
                    height={560}
                    alt={item.name}
                    className="img-fluid"
                  />
                  <div className="title">{item.name}</div>
                </Link>
              </div>
            </Col>
          ))}
        </Row>
        <Row>
          <Col>
            <div className="text-center">
              <button className="btn3">View More</button>
            </div>
          </Col>
        </Row>
      </Container>
    </section>
  );
};

export default Explore;