import React from "react";
import "./Categories.css";
import Image from "next/image";
import Link from "next/link";
import { Button } from '@/components/ui/button';

const Categories = () => {
  return (
    <div className="flex h-[80svh] gap-[10px] mx-[10px] w-full">
      <div className="col">
        <div className="row">
          <Image className="category-image" src="/batch1/Mockup 126.png" width={400} height={400} alt="category-one"/>
          <Button className="category-button" >
            <Link href={"/products/1"}>Kids</Link>
          </Button>
        </div>
        <div className="row">r2</div>
      </div>
      <div className="col">
        <div className="row">r3</div>
      </div>
      <div className="col-l">
        <div className="row">
          <div className="col">
            <div className="row">r4</div>
          </div>
          <div className="col">
            <div className="row">r5</div>
          </div>
        </div>
        <div className="row">r6</div>
      </div>
    </div>
  );
};

export default Categories;
