---
import type { Portfolio as Props } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';

const {
  title = '',
  subtitle = '',
  tagline = '',
  items = [],

  callToAction,

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline 
    title={title} 
    subtitle={subtitle} 
    tagline={tagline}
    classes={{
      title: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : '',
      subtitle: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400',
    }}
  />

  <div class="mx-auto max-w-7xl p-4 md:px-8">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {
        items &&
          items.map((image) => (
            <div class="flex h-auto intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
              <div class="relative overflow-hidden rounded-lg shadow-xl dark:shadow-none dark:border dark:border-slate-600 group">
                <Image
                  class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
                  width={400}
                  height={256}
                  widths={[400, 768, 1200]}
                  layout="responsive"
                  {...image}
                />
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300" />
              </div>
            </div>
          ))
      }
    </div>
  </div>

  {
    callToAction && (
      <div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
        <Button {...callToAction} />
      </div>
    )
  }
</WidgetWrapper>