---
// Copyright (c) Pascal Brand
// MIT License

import './webtools-polaroid.scss'
import { webtools } from '../../index'
import type { HTMLAttributes } from 'astro/types';

const propsToVars: webtools.PropsToVars = [
  { var: '--wt-polaroid-up',     prop: "up"},
  { var: '--wt-polaroid-rotate', prop: "rotate"},
]
interface PrivateProps {
  img: string,
  text: string,
  up ?: string,
  rotate ?: string,
}

interface Props extends HTMLAttributes<"div">, PrivateProps {}

const {
  class: className = '',
  style = '',
  img,
  text,
  ...props
} = Astro.props;

---
<div
  style=`${webtools.createVarStyle(style, props, propsToVars)}`
  class={className + " webtools-polaroid"}
  {...props}>
    <img src={img} alt="Polaroid"/>
    <div class="webtools-polaroid__text">
      {text}
    </div>
</div>