interface ServiceCardProps {
  icon: React.ReactNode;
  title: string;
  subtitle?: string;
}

export default function ServiceCard({ icon, title, subtitle }: ServiceCardProps) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "0.85rem" }}>
      <div
        style={{
          width: 46,
          height: 46,
          borderRadius: "50%",
          border: "2px solid #e85c1a",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
          color: "#e85c1a",
        }}
      >
        {icon}
      </div>
      <div>
        <p
          style={{
            fontFamily: "var(--font-montserrat)",
            fontWeight: 700,
            fontSize: "0.85rem",
            color: "#fff",
            textTransform: "none",
            letterSpacing: 0,
            lineHeight: 1.3,
          }}
        >
          {title}
        </p>
        {subtitle && (
          <p
            style={{
              fontFamily: "var(--font-montserrat)",
              fontSize: "0.75rem",
              color: "rgba(255,255,255,0.5)",
              textTransform: "none",
              letterSpacing: 0,
              marginTop: "0.15rem",
            }}
          >
            {subtitle}
          </p>
        )}
      </div>
    </div>
  );
}