import React from "react";
import Link from "next/link";
import { AspectRatio } from "../ui/aspect-ratio";
import Image from "next/image";
import { ProductRecommendationCarouselCard } from "./ProductRecommendationCarouselCard";
import { ChipSharp } from "./ChipSharp";
import { Chip } from "./Chip";

export const TabStyleWithLeftImage = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-16">
      <div className=" flex flex-row rounded-md space-x-1">
        <AspectRatio ratio={20 / 8} className="bg-muted rounded-l-md">
          <Link href="/">
            <Image
              src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              alt="Image"
              fill
              className="h-full w-full rounded-md object-cover"
              sizes="(max-width: 1280px) 33vw, 384px"
            />
          </Link>
        </AspectRatio>
        <div className="w-2/3 h-max rounded-r-md space-y-1">
          <AspectRatio ratio={14 / 8} className="rounded-tr-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-tr-lg object-cover"
                sizes="(max-width: 1280px) 66vw, 768px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={14 / 8} className="rounded-br-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-br-lg object-cover"
                sizes="(max-width: 1280px) 66vw, 768px"
              />
            </Link>
          </AspectRatio>
        </div>
      </div>
    </AspectRatio>
  );
};

export const TabStyleWithRightImage = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-16">
      <div className=" flex flex-row rounded-md space-x-1">
        <div className="w-2/3 h-max rounded-r-md space-y-1">
          <AspectRatio ratio={14 / 8} className="rounded-tl-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-tl-lg object-cover"
                sizes="(max-width: 1280px) 66vw, 768px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={14 / 8} className="rounded-bl-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-bl-lg object-cover"
                sizes="(max-width: 1280px) 66vw, 768px"
              />
            </Link>
          </AspectRatio>
        </div>
        <AspectRatio ratio={20 / 8} className="bg-muted rounded-r-md">
          <Link href="/">
            <Image
              src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              alt="Image"
              fill
              className="h-full w-full rounded-r-md object-cover"
              sizes="(max-width: 1280px) 33vw, 384px"
            />
          </Link>
        </AspectRatio>
      </div>
    </AspectRatio>
  );
};

export const TabStyleWithBottomImage = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-16">
      <div className=" flex flex-col rounded-md space-y-1">
        <div className="w-full h-fit rounded-t-md space-x-1 flex flex-row">
          <AspectRatio ratio={36 / 8} className="rounded-tl-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-tl-lg object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={36 / 8} className="">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={36 / 8} className="rounded-tr-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-tr-lg object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>
        </div>
        <AspectRatio ratio={34 / 8} className="bg-muted rounded-b-md">
          <Link href="/">
            <Image
              src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              alt="Image"
              fill
              className="h-full w-full rounded-b-md object-cover"
              sizes="(max-width: 1280px) 100vw, 1152px"
            />
          </Link>
        </AspectRatio>
      </div>
    </AspectRatio>
  );
};

export const TabStyleWithTopImage = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-16">
      <div className=" flex flex-col rounded-md space-y-1">
        <AspectRatio ratio={34 / 8} className="bg-muted rounded-t-md">
          <Link href="/">
            <Image
              src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              alt="Image"
              fill
              className="h-full w-full rounded-t-md object-cover"
              sizes="(max-width: 1280px) 100vw, 1152px"
            />
          </Link>
        </AspectRatio>
        <div className="w-full h-fit rounded-r-md space-x-1 flex flex-row">
          <AspectRatio ratio={36 / 8} className="rounded-bl-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-bl-lg object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={36 / 8} className="">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>

          <AspectRatio ratio={36 / 8} className="rounded-br-lg">
            {" "}
            <Link href="/">
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-br-lg object-cover"
                sizes="(max-width: 1280px) 33vw, 384px"
              />
            </Link>
          </AspectRatio>
        </div>
      </div>
    </AspectRatio>
  );
};

export const TabStyleWithRightImageAndCards = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-10">
      <div className=" flex flex-row rounded-md space-x-1 justify-stretch">
        <div className="w-full h-max">
          <h3 className="text-lg mx-4 my-2">Passende Kategorien</h3>
          <div className="w-full h-max flex flex-row row-span-3 rounded-r-md space-x-2 justify-around">
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
          </div>
          <h3 className="text-lg mx-4 my-2">Passende Produkte</h3>

          <div className="w-full h-max flex flex-row row-span-3 rounded-r-md space-x-2 justify-around">
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
          </div>
        </div>
        <div className="w-9/12 rounded-lg space-y-1 p-2">
          <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
            <Link href="/">
              {/* Performance: Added sizes to optimize image delivery and ensure full coverage within AspectRatio */}
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-lg object-cover"
                sizes="(max-width: 1280px) 40vw, 500px"
              />
            </Link>
          </AspectRatio>
        </div>
      </div>
    </AspectRatio>
  );
};

export const TabStyleWithLeftImageAndCards = () => {
  return (
    <AspectRatio ratio={16 / 7} className="mx-10">
      <div className=" flex flex-row rounded-md space-x-1 justify-stretch">
        <div className="w-9/12 rounded-lg space-y-1 p-2">
          <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
            <Link href="/">
              {/* Performance: Added sizes to optimize image delivery and ensure full coverage within AspectRatio */}
              <Image
                src="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
                alt="Image"
                fill
                className="h-full w-full rounded-lg object-cover"
                sizes="(max-width: 1280px) 40vw, 500px"
              />
            </Link>
          </AspectRatio>
        </div>
        <div className="w-full h-max">
          <h3 className="text-lg mx-4 my-2">Passende Kategorien</h3>
          <div className="w-full h-max flex flex-row row-span-3 rounded-r-md space-x-2 justify-around">
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
            <Chip
              image="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              text="Möbel"
            />
          </div>
          <h3 className="text-lg mx-4 my-2">Passende Produkte</h3>

          <div className="w-full h-max flex flex-row row-span-3 rounded-r-md space-x-2 justify-around">
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
            <ProductRecommendationCarouselCard
              ImageLink="https://jomblo.de/wp-content/uploads/2024/11/1400x800-px-Jomblo-Banner.jpg"
              ProductName="Test Produkt Name 12"
              ProductId="12"
              ProductPrice="12"
            />
          </div>
        </div>
      </div>
    </AspectRatio>
  );
};
