import React from "react";
import { AbsoluteFill, useCurrentFrame, spring } from "remotion";

interface TitleSlideProps {
  companyName: string;
  subtitle?: string;
}

export const TitleSlide: React.FC<TitleSlideProps> = ({ companyName, subtitle }) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {
      damping: 12,
      stiffness: 100,
      mass: 0.5,
    },
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0f0f0f",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          transform: `scale(${scale})`,
          textAlign: "center",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 72,
            fontWeight: 800,
            letterSpacing: "-0.02em",
            lineHeight: 1.1,
          }}
        >
          {companyName}
        </div>
        {subtitle && (
          <div
            style={{
              color: "#a0a0a0",
              fontSize: 36,
              marginTop: 24,
              fontWeight: 400,
            }}
          >
            {subtitle}
          </div>
        )}
      </div>
    </AbsoluteFill>
  );
};
