import { Component, input, ChangeDetectionStrategy } from '@angular/core';

/**
 * Quote card component for Storybook carousel examples.
 * Displays a quote with author in a styled card matching the Figma design.
 */
@Component({
  selector: 'quote-card',
  template: `
    <div class="quote-card">
      <div class="quote-card__content">
        <p class="quote-card__quote isa-text-body-1-regular text-isa-neutral-900">
          "{{ quote() }}"
        </p>
        @if (author()) {
          <p class="quote-card__author isa-text-body-2-bold text-isa-neutral-700">
            — {{ author() }}
          </p>
        }
      </div>
    </div>
  `,
  styles: [`
    .quote-card {
      background: white;
      border-radius: 16px;
      padding: 20px 22px;
      min-width: 334px;
      max-width: 334px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.2s ease;
    }

    .quote-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .quote-card__content {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .quote-card__quote {
      font-style: italic;
      line-height: 1.5;
      margin: 0;
    }

    .quote-card__author {
      margin: 0;
      font-style: normal;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class QuoteCardComponent {
  quote = input.required<string>();
  author = input<string>('');
}
