import { cn } from '$shared/lib';

export interface Props {
  /**
   * Project year
   */
  year: string;
  /**
   * Developer role on the project
   */
  role: string;
  /**
   * Technology stack list
   */
  stack: string[];
  /**
   * Additional CSS classes
   */
  className?: string;
}

/**
 * Sidebar metadata display for a project: year, role, and stack.
 */
export function ProjectMetadata({ year, role, stack, className }: Props) {
  return (
    <div className={cn('space-y-6', className)}>
      <div>
        <p className="text-xs uppercase tracking-wider opacity-60">YEAR</p>
        <p className="text-base font-bold">{year}</p>
      </div>
      <div className="brutal-border-top pt-6">
        <p className="text-xs uppercase tracking-wider opacity-60">ROLE</p>
        <p className="text-base font-bold">{role}</p>
      </div>
      <div className="brutal-border-top pt-6">
        <p className="text-xs uppercase tracking-wider opacity-60">STACK</p>
        {stack.map((tech) => (
          <p key={tech} className="text-sm">
            {tech}
          </p>
        ))}
      </div>
    </div>
  );
}