// movie-card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-movie-card',
  standalone: true,
  template: `<p>{{ title }} ({{ year }})</p>`,
})
export class MovieCardComponent {
  @Input() title = '';
  @Input() year = 0;
}

// app.component.ts
import { Component } from '@angular/core';
import { MovieCardComponent } from './movie-card/movie-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MovieCardComponent],
  template: `
    <app-movie-card [title]="'Inception'" [year]="2010"></app-movie-card>
    <app-movie-card [title]="'Arrival'" [year]="2016"></app-movie-card>
    <app-movie-card [title]="'Parasite'" [year]="2019"></app-movie-card>
  `,
})
export class AppComponent {}

/*
  Notes:
  - Each @Input() marks a property the parent is allowed to set —
    the equivalent of declaring a prop in React.
  - [title]="'Inception'" needs inner quotes because the binding
    evaluates as an expression; [year]="2010" passes a real number,
    the same string-vs-expression distinction as React's props.
*/