import React from "react";
import Card from "./Card";
import { Family, HomeSettings, RelaxingAtHome } from "./WelcomeCardIcons";
import useResponsiveVisibility from "../../hooks/useResponsiveVisibility";
import { useRef } from "react";

interface WelcomeCardProps {
  title: string;
  text: string;
  icon: "family" | "relaxing-at-home" | "home-settings";
  button?: React.ReactNode;
}

export default function WelcomeCard({ title, text, icon, button = null }: WelcomeCardProps) {
  const parentRef = useRef<HTMLDivElement>(null);
  const isVisible = useResponsiveVisibility(parentRef, 700);

  return (
    <Card ref={parentRef} className="welcome-card">
      <div className="welcome-card-text">
        <h1>{title}</h1>
        <p>{text}</p>
        {button}
      </div>
      {isVisible && icon === "family" && <Family />}
      {isVisible && icon === "relaxing-at-home" && <RelaxingAtHome />}
      {isVisible && icon === "home-settings" && <HomeSettings />}
    </Card>
  );
}