"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * Card Image — https://app.subframe.com/f023064a5ca0/library?component=Card+Image_1f735087-2381-42e1-8ceb-491a8bc63948
 */

import React from "react";
import * as SubframeUtils from "../../utils";
import { Button } from "../Button";

export interface CardImageRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  outlined?: boolean;
  layout?: "horizontal" | "vertical";
  hideImage?: boolean;
  title?: React.ReactNode;
  body?: React.ReactNode;
  className?: string;
}

const CardImageRoot = React.forwardRef<HTMLDivElement, CardImageRootProps>(
  function CardImageRoot(
    {
      outlined = false,
      layout = "horizontal",
      hideImage = false,
      title,
      body,
      className,
      ...otherProps
    }: CardImageRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/1f735087 flex min-w-[448px] max-w-[448px] items-start gap-6 px-6 py-6",
          {
            "flex-col": layout === "vertical",
            "rounded-md border border-solid border-border-default bg-surface-neutral-primary":
              outlined,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <img
          className={SubframeUtils.twClassNames(
            "h-40 w-40 flex-none object-cover",
            { hidden: hideImage }
          )}
          src="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
        />
        <div className="flex flex-col items-start gap-6">
          <div
            className={SubframeUtils.twClassNames(
              "flex w-full flex-col items-start gap-3 pr-6",
              { "gap-6": layout === "vertical" }
            )}
          >
            {title ? (
              <span className="w-full text-body-large-0 font-body-large-0 text-icon-neutral-primary">
                {title}
              </span>
            ) : null}
            <div className="flex w-full flex-col items-start gap-5">
              {body ? (
                <span className="w-full break-words text-body-default-regular-150 font-body-default-regular-150 text-icon-neutral-primary">
                  {body}
                </span>
              ) : null}
              <Button>Button</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
);

export const CardImage = CardImageRoot;