{{/* 
使用方法:
{{ embed "components/card" }}
内容放这里
{{ end }}
*/}}

<div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md mb-6">
    {{if or .Title .Icon}}
    <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <div class="flex items-center">
            {{if .Icon}}
            <div class="rounded-full p-2 {{if .IconBg}}{{.IconBg}}{{else}}bg-indigo-100{{end}} mr-3">
                <i class="{{.Icon}} {{if .IconColor}}{{.IconColor}}{{else}}text-indigo-600{{end}}"></i>
            </div>
            {{end}}
            
            {{if .Title}}
            <h3 class="font-medium text-gray-800">{{.Title}}</h3>
            {{end}}
        </div>
        
        {{if .ActionButton}}
        <div>
            {{.ActionButton}}
        </div>
        {{end}}
    </div>
    {{end}}
    
    <div class="p-4">
        {{.Content}}
    </div>
    
    {{if .Footer}}
    <div class="bg-gray-50 px-4 py-3 text-right text-sm text-gray-500 border-t border-gray-100">
        {{.Footer}}
    </div>
    {{end}}
</div>