import React from 'react'
import { SectionLabel } from '@/components/ui'

interface SecurityAndTrustProps {
  badge: string
  title: string
  description: string
}

export const SecurityAndTrust = ({ badge, title, description }: SecurityAndTrustProps) => {
  return (
    <section className='bg-[#0F210C] py-20 md:py-24 xl:py-[150px]'>
      <div className='container'>
        <div className='flex flex-col lg:flex-row items-center gap-10 justify-between'>
          <SectionLabel
            label={badge}
            labelclass='border-[#313C31]'
            textclass='text-white'
            title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="text-secondary">') }} />}
            titleClassName='max-w-[30rem]'
            descriptionClassName='max-w-[40rem]'
            description={description}
          />

          <video
            src='/Security_trust.mp4'
            autoPlay
            muted
            loop
            playsInline
            className='h-auto lg:w-[739px]'
            aria-label={badge}
          />
        </div>
      </div>
    </section>
  )
}