Choose an item from the random and navigate to another page

export interface Perfume {
  name: string;
  image: Resource;
  category: string;
  description: string;
}

export const dummyPerfume: Perfume[] = [
  {
    name: 'Perfume1',
    image: $r('app.media.dummyperfume1'),
    category: 'Romantic',
    description: 'desc1'
  },
  {
    name: Perfume2',
    image: $r('app.media.dummyperfume2'),
    category: 'Masculine',
    description: 'desc2'
  },
  {
    name: 'Perfume3',
    image: $r('app.media.dummyperfume3'),
    category: 'Unisex',
    description: 'desc3'
  },
  {
    name: 'Perfume4',
    image: $r('app.media.dummyperfume4'),
    category: 'Night',
    description: 'desc4'
  },
  {
    name: 'Perfume5',
    image: $r('app.media.dummyperfume5'),
    category: 'Seasonal',
    description: 'desc5'
  },
]

  @State selectedPerfume: Perfume | null = null;

 Button('Perfume of the Day')
          .height(50)
          .margin(2)
          .width('100%')
          .backgroundColor('#ffd4c890')
          .onClick(() => {
            const randomIndex = Math.floor(Math.random() * dummyPerfume.length);
            this.selectedPerfume = dummyPerfume[randomIndex];
            router.pushUrl({
              url: 'pages/PerfumeOfTheDayPage',
              params: {
                name: this.selectedPerfume.name,
                image: this.selectedPerfume.image,
                category: this.selectedPerfume.category,
                description: this.selectedPerfume.description,
              }
            })
          })

import { Perfume } from '../model/PerfumeModel';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct PerfumeOfTheDayPage {
  params: Perfume = router.getParams() as Perfume;

  build() {
    Column() {
      Text('💕 Perfume of Today 💕').fontSize(12)
        .padding({ bottom: 10 })
      Image(this.params.image)
        .height(100)
        .width(120)
        .borderRadius(10)
        .objectFit(ImageFit.Contain)
        .padding({ bottom: 5 })
      Text(this.params.name).fontSize(11).fontWeight(FontWeight.Bold).fontColor(Color.Black).padding({ bottom: 2 })
      Text(this.params.category).fontSize(9).fontColor(Color.Black)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }
}