import{html as t,css as e}from"../../../lit/index.js";import{SimpleColors as a}from"../../simple-colors/simple-colors.js";class DateChip extends a{static get tag(){return"date-chip"}static get properties(){return{...super.properties,timestamp:{type:Number},unix:{type:Boolean},month:{type:String},day:{type:Number}}}static get styles(){return[super.styles,e`
        :host {
          display: block;
        }

        .date-container {
          text-align: center;
        }

        .date-month {
          display: block;
          border-radius: 4px 4px 0 0;
          background: var(--simple-colors-default-theme-accent-12, #1e407c);
          color: var(--simple-colors-default-theme-grey-1, #f7f7f7);
          font-size: var(
            --date-chip-month-font-size,
            var(--date-chip-font-size, 18px)
          );
          font-weight: bold;
          line-height: 1.8;
          padding: 0px 8px;
          text-transform: uppercase;
        }

        .date-container .date-day {
          background: var(--simple-colors-default-theme-accent-2, #f7f7f7);
          border-radius: 0 0 4px 4px;
          border-style: solid;
          border-color: var(--simple-colors-default-theme-accent-12, #f7f7f7);
          color: var(--simple-colors-default-theme-grey-12, #444);
          display: block;
          font-size: var(--date-chip-font-size, 18px);
          font-weight: 900;
          padding: 8px 16px;
        }
      `]}constructor(){super(),this.timestamp=null,this.unix=null,this.month=null,this.day=null}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{if(["timestamp","format","unix"].includes(e)&&this.timestamp){let t=this.timestamp;this.unix&&(t*=1e3),this.month=new Date(t).toLocaleString("default",{month:"long"}).substring(0,3),this.day=new Date(t).getDate()}}))}render(){return t`
      <div class="date-container">
        <span class="date-month">${this.month}</span>
        <span class="date-day">${this.day}</span>
      </div>
    `}}customElements.define(DateChip.tag,DateChip);