import Image from "next/image";
import { Button } from "@/components/ui/button";
import { DirectionalChevron } from "@/components/ui/directional-chevron";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";

type ServiceRowProps = {
  id: string;
  title: string;
  description: string;
  browseLabel: string;
  contactLabel: string;
  reverse?: boolean;
  highlighted?: boolean;
  direction: "rtl" | "ltr";
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
};

export default function ServiceRow({
  id,
  title,
  description,
  browseLabel,
  contactLabel,
  reverse = false,
  highlighted = false,
  direction,
  imageSrc,
  imageAlt,
  href,
}: ServiceRowProps) {
  const alignStart = direction === "ltr" ? !reverse : reverse;
  const linkHref = href ?? `/our-services/${id}`;

  return (
    <article
      className={cn(
        "rounded-[18px] border border-border p-5 shadow-[0_10px_30px_rgba(13,52,48,0.05)] sm:p-6 lg:p-7",
        highlighted ? "bg-highlights-bg" : "bg-white"
      )}
    >
      <div
        className={cn(
          "flex flex-col gap-6 lg:items-center",
          reverse ? "lg:flex-row-reverse" : "lg:flex-row"
        )}
      >
        <div className="w-full lg:w-[330px]">
          {imageSrc ? (
            <div className="relative h-[180px] w-full overflow-hidden rounded-[12px] sm:h-[195px] lg:h-[168px]">
              <Image
                src={imageSrc}
                alt={imageAlt ?? title}
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 330px"
              />
            </div>
          ) : (
            <div className="h-[180px] w-full rounded-[12px] bg-muted sm:h-[195px] lg:h-[168px]" />
          )}
        </div>

        <div
          className={cn(
            "flex w-full flex-col gap-4",
            alignStart ? "items-start text-start" : "items-end text-end"
          )}
        >
          <h2 className="text-[28px] font-bold leading-[1.25] text-foreground sm:text-[32px]">
            {title}
          </h2>
          <p className="max-w-[650px] text-[15px] leading-[1.8] text-muted-foreground sm:text-[16px]">
            {description}
          </p>

          <div
            className={cn(
              "flex flex-wrap items-center gap-3 pt-1",
              alignStart ? "justify-start" : "justify-end"
            )}
          >
            <Button
              asChild
              className="h-10 rounded-full bg-primary px-5 text-sm font-semibold text-white hover:bg-primary-700"
            >
              <Link href={linkHref}>
                <DirectionalChevron direction={direction} className="h-4 w-4" />
                {browseLabel}
              </Link>
            </Button>

            <Button
              asChild
              variant="outline"
              className="h-10 rounded-full border-primary px-5 text-sm font-semibold text-primary hover:bg-highlights-bg"
            >
              <Link href="/contact-us">{contactLabel}</Link>
            </Button>
          </div>
        </div>
      </div>
    </article>
  );
}