import Image, { type StaticImageData } from "next/image";
import type { CSSProperties, ReactNode } from "react";
import { Text } from "@/components/ui";
import { cn } from "@/lib/utils";

type SolutionCardProps = {
  title: ReactNode;
  subtitle: string;
  description: string;
  services: string[];
  image: StaticImageData | string;
  imageAlt: string;
  flexReverse?: boolean;
  imageAsBackground?: boolean;
  background?: CSSProperties["background"];
  imageOverlay?: CSSProperties["background"];
  dark?: boolean;
  priority?: boolean;
  className?: string;
  id?: string;
  imageChildren?: ReactNode;
};

export function SolutionCard({
  title,
  subtitle,
  description,
  services,
  image,
  imageAlt,
  flexReverse = false,
  imageAsBackground = false,
  background = "#EDF3ED",
  imageOverlay,
  dark = false,
  priority = false,
  className,
  imageChildren,
  id
}: SolutionCardProps) {
  const content = (
    <div
      id={id}
      dir="auto"
      className={` relative z-10 flex space-y-[30px] p-5 lg:p-8 xl:p-10 [@media(min-width:1700px)]:p-[100px] flex-col justify-center pxcontainer lg:w-1/2 ${
        imageAsBackground ? "lg:max-w-[52%]" : ""
      } ${dark ? "text-white" : "text-accent"}`}
    >
   <div className="space-y-5">
       <Text size="h2" 
      className="max-w-[30rem] uppercase leading-[45px] xl:leading-[60px] 2xl:leading-[68px]"
      >
        {title}
      </Text>
      <Text size="h3" fontWeight={600} >
        {subtitle}
      </Text>
      <Text
        size="normal"
        className={ `max-w-[40rem] ${
          dark ? "text-white" : "text-accent"
        }`}
      >
        {description}
      </Text>
   </div>

      <ul className="flex flex-wrap gap-2.5 max-w-xl">
        {services.map((service, index) => (
          <li
            key={`${service}-${index}`}
            className={`rounded-full px-[15px] lg:px-5 py-[5px] lg:py-2.5  ${
              dark
                ? " text-white bg-[#FFFFFF1A] backdrop-blur-[8px]"
                : "bg-white "
            }`}
          >
            <Text size="normal" className="font-semibold" textKey= {service}/>
           
          </li>
        ))}
      </ul>
    </div>
  );

  if (imageAsBackground) {
    return (
      <article
        dir="ltr"
        className={cn(
          "relative isolate flex min-h-[577px] flex-col justify-end overflow-hidden rounded-[20px] sm:min-h-[590px] lg:min-h-[620px] lg:flex-row lg:justify-start",
          flexReverse && "lg:justify-end",
          className
        )}
        style={{ background }}
      >
        <div className="absolute inset-x-0 top-0 -z-20 h-[62%] lg:inset-0 lg:h-auto">
          <Image
            src={image}
            alt={imageAlt}
            fill
            priority={priority}
            sizes="(max-width: 1024px) 100vw, (max-width: 1280px) 100vw, 1400px"
            className="object-cover"
          />
        </div>
        <div
          aria-hidden="true"
          className="absolute inset-0 -z-10 bg-[linear-gradient(360deg,#082416_61.06%,rgba(8,36,22,0)_100%)] lg:hidden"
        />
        <div
          aria-hidden="true"
          className="absolute inset-0 -z-10 hidden lg:block"
          style={{
            background:
              imageOverlay ??
              (flexReverse
                ? "linear-gradient(270deg, #082416 40.61%, rgba(8, 36, 22, 0) 77.68%)"
                : "linear-gradient(90deg, #082416 40.61%, rgba(8, 36, 22, 0) 77.68%)"),
          }}
        />
        {content}
      </article>
    );
  }

  return (
    <article
      dir="ltr"
      className={cn(
        "relative flex min-h-[520px] flex-col overflow-hidden rounded-[20px] xl:min-h-[782px] lg:flex-row",
        flexReverse && "lg:flex-row-reverse",
        className
      )}
      style={{ background }}
    >
      {content}
      <div className="absolute bottom-0 right-0 top-0 w-1/2 max-lg:relative max-lg:w-full max-lg:min-h-[360px]">
        <Image
          src={image}
          alt={imageAlt}
          priority={priority}
          fill
          sizes="(max-width: 1024px) 100vw, 50vw"
          className="object-contain object-right-bottom"
        />
        {imageChildren}
      </div>
    </article>
  );
}