import { relativeTimeMs } from '@/utils/time';
import { Project } from 'gql-client';
import { Clock, GitBranch } from 'lucide-react';
import { ComponentPropsWithoutRef } from 'react';

/**
 * Props for the ProjectDeploymentInfo component
 * 
 * @property {Project} project - The project data containing deployment information
 */
interface ProjectDeploymentInfoProps extends ComponentPropsWithoutRef<'div'> {
  project: Project;
}

/**
 * ProjectDeploymentInfo component
 * 
 * Displays information about the latest deployment for a project, including:
 * - Commit message (or "No production deployment" if none exists)
 * - Relative time since deployment or project creation
 * - Branch name (if a deployment exists)
 * 
 * The component handles both cases where a project has deployments and where it doesn't,
 * displaying appropriate information in each case.
 * 
 * @example
 * ```tsx
 * <ProjectDeploymentInfo project={projectData} />
 * ```
 */
export const ProjectDeploymentInfo = ({ project, ...props }: ProjectDeploymentInfoProps) => {
  const hasDeployment = project.deployments.length > 0;
  const latestDeployment = project.deployments[0];

  return (
    <div className="flex flex-col gap-3" {...props}>
      {/* Commit message or no deployment message */}
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground">
          {hasDeployment ? latestDeployment?.commitMessage : 'No production deployment'}
        </span>
      </div>

      {/* Timestamp and branch information */}
      <div className="flex items-center gap-1">
        <div className="flex items-center gap-1">
          <Clock className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm text-muted-foreground">
            {hasDeployment ? relativeTimeMs(latestDeployment.createdAt) : relativeTimeMs(project.createdAt)} on
          </span>
        </div>
        {hasDeployment && (
          <div className="flex items-center gap-1">
            <GitBranch className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">{latestDeployment.branch}</span>
          </div>
        )}
      </div>
    </div>
  );
};