"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * Card Icon — https://app.subframe.com/f023064a5ca0/library?component=Card+Icon_41867f0d-7a6a-4e51-9b08-6cce5a3070b1
 */

import React from "react";
import { FeatherInfo } from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Button } from "../Button";

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

const CardIconRoot = React.forwardRef<HTMLDivElement, CardIconRootProps>(
  function CardIconRoot(
    {
      outlined = false,
      layout = "horizontal",
      hideIcon = false,
      title,
      body,
      className,
      ...otherProps
    }: CardIconRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/41867f0d 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}
      >
        <div
          className={SubframeUtils.twClassNames("flex items-start gap-4", {
            hidden: hideIcon,
          })}
        >
          <FeatherInfo className="font-['Inter'] text-[24px] font-[400] leading-[24px] text-icon-neutral-primary" />
        </div>
        <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-text-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-text-neutral-secondary">
                  {body}
                </span>
              ) : null}
              <Button>Button</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
);

export const CardIcon = CardIconRoot;